php配置文件画布,如何通过php脚本将画布保存为localhost中的png并将图像加载到画布中？...

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]);

}

通过使用上述功能，我可以成功地将图像添加到画布。但我的问题是，当我尝试将画布保存为图像时，它会显示空白图像。我使用下面的代码将画布转换为图像。

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如下。

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.';

即使我添加图片到画布上，保存时，我得到的只是空白的画布，没有得到我已加载到画布图像。请帮助我。提前感谢。

2015-08-23

Tharu

+0

你应该叫'canvas.toDataURL()'在点击的功能，在这里似乎你调用它，而加载页面。显然，你的画布仍然是白色的。 –