我按照这个例子将画布保存到PNG文件.http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/
我的问题:下载的文件已损坏,当我在记事本中打开它时,它有这样的模式:
<body><html> 如果我删除#1和#3并在本地保存文件,我会得到一个有效的PNG图像.
我正在做上面的例子,但我的结果是不同的.为什么dataURL会有任何其他信息.除了画布本身？
谢谢.
编辑
<?php
$imdata = $_POST["imgdata"];
//run this code only when there is long POST data
if(strlen($imdata)>1000) {
//removing the "data:image/png;base64," part
$imdata = substr($imdata,strpos($data,",")+1);
// put the data to a file
file_put_contents('image.png', base64_decode($imdata));
//force user to download the image
if(file_exists("image.png")){
header('Content-type: image/png');
header('Content-Disposition: attachment; filename="image.png"');
readfile('image.png');
}
}
?>
在HTML5中保存画布时,最终会得到一个base64字符串,在此字符串的开头是有关图像格式的特定信息.如果您希望以后保存base64以便转换为硬文件,则需要将其关闭.如果要将图像重绘到画布(或某些图像控件)上,则需要再次添加此信息.
以下是保存文件的方法:
var dataURL = document.getElementsByTagName("canvas")[0].toDataURL("image/png");
// strip off invalid data for saving
dataURL = dataURL.replace("data:image/png;base64,", "");
现在,您只需将base64字符串转换为图像,并在需要时保存到硬文件中.如果要再次在画布上显示此图像,请按以下步骤操作:
function displayImage(base64string) {
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
var image = new Image();
// prepend the required image info again
image.src = "data:image/png;base64," + base64string;
image.onload = function() {
context.drawImage(image, 0, 0);
}
}