使用HTML2Canvas将PNG保存到服务器

我正在使用本教程中的方法要将用HTML生成的图片保存到服务器中的PNG或JPEG文件。

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

图片应出现在image_iddiv中，但不在。

这是我的代码：

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

看起来代码缺少某个末端} and），用于结束和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>

相关内容

最新更新

热门标签：