[英]HTML5 CANVAS: How to save and reopen image from server
我用html5-canvas画东西。 然后我想保存它,当再次加载页面时,我想将保存的图像重新加载到画布上。 我成功地将数据保存到服务器中的文件中,但是由于某种原因,这是一个奇怪的文件,无法通过ant软件打开,当然也不能通过我的画布打开。 我将其另存为png base64,但是尝试了其他无效的方法。
JavaScript代码:
function save(){ //saves the canvas into a string as a base64 png image. jsvalue is sent to the server by an html form
var b_canvas = document.getElementById("a");
var b_context = b_canvas.getContext("2d");
var img = b_canvas.toDataURL("image/png");
document.classic_form.jsvalue.value = img;
}
// opens the image file and displays it on the canvas
var canvas = document.getElementById("a");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "backpicture.png";
img.onload = function() {
context.drawImage(img, 0, 0);
};
php代码:
<?php
$str=$_POST['jsvalue'];
$file=fopen("backpicture.txt","w");
if(isset($_POST['submit']))
fwrite($file,$str);
fclose($file)
?>
它创建文件,但是当我再次加载页面时在画布上什么也不显示。 我也尝试使用Canvas2Image.saveAsPNG()
,但是仍然无法正常工作。
你能帮忙吗? 谢谢!
为了正确保存文件,您需要解码base64数据(并另存为png):
file_put_contents('backpicture.png', base64_decode($str));
这个:
.toDataURL("image/png");
会给你这样的东西:
图像/ PNG; BASE64,iVBORw0K ... [base64encoded_string] ...
正如@Variant所说,您需要对它进行base64_decode,但忽略“ image / png; base64”,
这应该工作:
file_put_contents('backpicture.png',base64_decode(substr($str,22)));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.