[英]How to save canvas as a png in localhost via a php script with the images loaded into the canvas?
I used the following function to add images to the canvas. 我使用以下功能将图像添加到画布。 I used fabric.js to do this. 我使用fabric.js来做到这一点。
document.getElementById('imgLoader').onchange = function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) { console.log('fdsf');
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
// start fabricJS stuff
var image = new fabric.Image(imgObj);
image.set({
left: 250,
top: 250,
angle: 0,
padding: 10,
cornersize: 1
});
//image.scale(getRandomNum(0.1, 0.25)).setCoords();
c.add(image);
//context.drawImage(imgObj, 100, 100);
// end fabricJS stuff
}
}
reader.readAsDataURL(e.target.files[0]);
}
By using the above function I can succesfully add images to the canvas. 通过使用以上功能,我可以成功地将图像添加到画布。 But my problem is when I try to save the canvas as an image, it gives a blank image. 但是我的问题是当我尝试将画布另存为图像时,它给出了空白图像。 I used the below code to convert the canvas to an image. 我使用以下代码将画布转换为图像。
var canvas = document.getElementById('c'); //Id of the canvas
var dataURL = canvas.toDataURL();
$('#saveMe').click(function() {
$.ajax({
type: "POST",
url: "myscript.php",
data: {
img: dataURL
}
}).done(function(o) {
console.log('saved');
});
myscript.php is as below. myscript.php如下。
define('UPLOAD_DIR', 'C:/xampp/htdocs/pic/');
chmod(UPLOAD_DIR, 777);
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
Even though I added images to the canvas, when saving, I get only the blank canvas, not getting the image I have loaded into the canvas. 即使我将图像添加到画布中,在保存时,我只会得到空白的画布,而不会获取加载到画布中的图像。 Please help me.Thanks in advance. 请帮助我。谢谢。
Use fileSaver.js ,its very handy . 使用fileSaver.js ,非常方便。 You can also see a demo here http://eligrey.com/demos/FileSaver.js/ 您还可以在此处http://eligrey.com/demos/FileSaver.js/查看演示。
Implementation 实作
$(function () {
$("#btnSave").click(function () {
html2canvas($("#widget"), {
onrendered: function (canvas) {
canvas.toBlob(function (blob) {
saveAs(blob, "Dashboard.png");
});
}
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.