html2canvas capturing div image

im working on my wordpress site in which i want a div to be converted to image.. im using html2canvas javascript and it works perfect. when i capture a post it saves it to the server has “Captured.jpg”. all good till here.. but when i click capture again on a different post it replaces the previous image “captured.jpg”. i want all the images of the posts that i capture to be saved on server with post names may be? is it possible?

Header

<script type="text/javascript">
function capture() {
   $("#quotesingle").html2canvas({ 
        canvas: hidden_screenshot,
        onrendered: function() {
            var img = $("#hidden_screenshot")[0].toDataURL();
            img= img.replace('data:image/png;base64','');
            $form = '<form name="frmact" action="result.php" method="post" ><input type="hidden" name="img" value="' + img + '" /></form>';
            $('body').append($form);
            frmact.submit();
            $('body').remove($form);    
        }
  });
}
</script>

Results.php

<?php
$canvasImg = $_POST['img'];    
$data = base64_decode($canvasImg);
$File = "captured.jpg"; 
$Handle = fopen($File, 'w');
fwrite($Handle, $data);  
fclose($Handle);
?>

captured.jpg is saved.

single.php

//POSTLOOP
<input type=button value="Screenshot" onclick="javascript:capture();" /><br /><br /></div>
<canvas id="hidden_screenshot" style="display:none;" >

is there any way if i trigger the capture for a post to save in a different name or post name or post id.. so it saves it to the server without replacing the old?

thanks

Answer

Result.php

Simple change the file name as below:

$File = "screens/" . time() . ".jpg";

Advertisement

Answer