Error in displaying the image of the screenshot of a webpage

Question

I've the code which takes the screen shot of the specified div tab. But I'm encountering the problem to display it as .png file from base64 format

Here is my code. It has two separate files

1) Download.php

<script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>
<!-- -->
<div id="target">
<img src="images/1.jpg" alt="Smiley face" width="100" height="100">
</div>
<script type="text/javascript">
    function capture() {
        $('#target').html2canvas({
            onrendered: function (canvas) {
                //Set hidden field's value to image data (base-64 string)
            $('#img_val').val(canvas.toDataURL("image/png"));
            //Submit the form manually
            document.getElementById("myForm").submit();
        }
    });
}
 </script>
<input type="submit" value="Take Screenshot Of Div" onclick="return capture();" />
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>

2)Save.php

    <?php
//Show the image
$data = $_POST['img_val'];

//Get the base-64 string from data
$uri = substr($data, strpos($data, ",") + 1);
//Decode the string

$unencodedData = base64_decode($uri);
$im = str_replace($data, '+', 'img.png');
//Save the image
$v = file_put_contents($data, $im);
$result = '<img src="' . $im . '" />';
print_r($result);
?>

I need the image to be displayed as localhost/xyz/screenshot/img.png which I'm unable to do.Please see the code help me to figure out that problem.

Thanks in advance.

Answer 1

I cant see any element in html with id attribute of target in your code but you are using it

$('#target').html2canvas({ 

Similar question [here][1]

I have found some thing usefull

var html2obj = html2canvas($('body'));

var queue  = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();

window.open(img);
  [1]: http://stac

koverflow.com/questions/10457608/create-screenshot-of-webpage-using-html2canvas-unable-to-initialize-properly