HTML5将画布保存为PNG

我按照此示例将画布保存为PNG文件。 http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/HTML5将画布保存为PNG

我的问题：下载的文件已损坏，当我在记事本打开它，它有这种模式：

HTML代码（Correspoding到PHP文件）
ASCII字符（我想对应于PNG文件）
<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'); 
     } 
} 
?>

来源

2012-08-01 SEU

即使你说：“我在做什么上面的例子说：”这将是很好，看看具体的代码_you_有，只是为了能够排除误解和错别字。 – Thorbear 2012-08-01 14:13:43

当你保存在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); 
    } 
}

来源

2012-08-01 14:11:42

我认为这个答案忽略了链接教程的重点，即为用户提供一个下载按钮来下载图像，并使用PHP为该文件生成一个更加人性化的名称。 – Thorbear 2012-08-01 14:16:33

@Thorbear我同意，我不直接回答这个问题。但是我所做的是提供了从画布中提取可用的base64字符串的方法 - 这可以在后面的代码中用于生成图像对象，并通过HTTP将其作为下载返回给用户。 – 2012-08-01 14:19:09

好的。我也想提一下，你的解决方案已经在链接教程中讨论过了，尽管他们已经解决了稍微不同的问题：'data = data.substr（data.indexOf（'，'）+ 1）.toString（）;' – Thorbear 2012-08-01 14:22:37

HTML5将画布保存为PNG

回答

相关问题