使用html2canvas将png保存到服务器

Question

我正在使用本教程中的方法将使用html生成的图片保存到服务器中的png或jpeg文件中。

我怀疑原始脚本中有错误，但找不到它

图片应出现在image_id div中，但不会出现。

这是我的代码：

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

Answer 1

看起来代码缺少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>

使用html2canvas将png保存到服务器

问题描述

1 个解决方案

解决方案1
0 2019-02-18 23:08:51

使用html2canvas将png保存到服务器

问题描述

1 个解决方案

解决方案1 0 2019-02-18 23:08:51

解决方案1
0 2019-02-18 23:08:51