сохранить png на сервере с помощью html2canvas - PullRequest
Новая
       8

сохранить png на сервере с помощью html2canvas

0 голосов
/ 19 февраля 2019

Я использую метод из этого урока для сохранения изображения, созданного с помощью html, в файл png или jpeg на сервере.

Я подозреваю, что в исходном скрипте произошла ошибка, ноне могу найти

картинка должна появиться в div image_id, но это не так.

вот мой код: 

<body>
<div class='container' id="printableArea">
...here goes the div to output as png
</div>
<div id="image_id">
<img src="" alt="image" />
</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>


     <script>
     html2canvas([document.getElementById('printableArea')], {

    onrendered: function (canvas) {
        var imagedata = canvas.toDataURL('image/png');
        var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");
        //ajax call to save image inside folder}
        $.ajax({
            url: 'save_image.php',
            data: {
                   imgdata:imgdata
                   },
            type: 'post',
            success: function (response) {   
               console.log(response);
               $('#image_id img').attr('src', response)

        }
    });
    }
    </script>

php-файл, который я использую, этоследующее: 

<?php 
$imagedata = base64_decode($_POST['imgdata']);
$filename = md5(uniqid(rand(), true));
//path where you want to upload image
$file = $_SERVER['DOCUMENT_ROOT'] . '/images/'.$filename.'.png';
$imageurl  = 'http://***.com/images/'.$filename.'.png';
file_put_contents($file,$imagedata);
echo $imageurl;
?>

1 Ответ

0 голосов
/ 19 февраля 2019

Похоже, что в коде отсутствует какой-то конец} и) для завершения onrendered и html2canvas: 

    <script>
 html2canvas([document.getElementById('printableArea')], {

onrendered: function (canvas) {
    var imagedata = canvas.toDataURL('image/png');
    var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");
        $.ajax({
            url: 'save_image.php',
            data: {
                   imgdata:imgdata
                   },
            type: 'post',
            success: function (response) {   
               console.log(response);
               $('#image_id img').attr('src', response);

        }
    });
}});
</script>
...