我使用下面的函數將圖像添加到畫布。我用fabric.js來做到這一點。如何通過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.';
即使我添加圖片到畫布上,保存時,我得到的只是空白的畫布,沒有得到我已加載到畫布圖像。請幫助我。提前感謝。
你應該叫'canvas.toDataURL()'在點擊的功能,在這裏似乎你調用它,而加載頁面。顯然,你的畫布仍然是白色的。 – Kaiido