Ошибка при отображении изображения скриншота веб-страницы

Question

У меня есть код, который делает снимок экрана указанной вкладки div. Но я столкнулся с проблемой, чтобы отобразить его в виде файла.png из формата base64

Вот мой код У него есть два отдельных файла

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);
?>

Мне нужно, чтобы изображение отображалось как localhost/xyz/screenshot/img.png, что я не могу сделать. Пожалуйста, посмотрите код, который поможет мне разобраться с этой проблемой.

Заранее спасибо.

Answer 1

Я не вижу ни одного элемента в html с атрибутом id target в вашем коде, но вы используете его

$('#target').html2canvas({ 

Подобный вопрос [здесь][1]

Я нашел что-то полезное

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