使用html2canvas将png保存到服务器
使用html2canvas将png保存到服务器
提问于 2019-02-19 06:50:00
我正在使用this tutorial的一个方法来保存一个用html生成的图片到服务器中的png或jpeg文件。
我怀疑原始脚本中有错误，但找不到它
图片应该出现在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
Stack Overflow用户
发布于 2019-02-19 07:08:51
看起来代码缺少一些end }和)来结束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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54756521
复制相关文章
相似问题
腾讯云开发者
