HTML5将画布保存为PNG

Question

I am following this example to save the canvas to a PNG file. 我正在按照此示例将画布保存到PNG文件。 http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/ http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/

My problem: The downloaded file is corrupt and when I open it in notepad, it has this pattern: 我的问题：下载的文件已损坏，当我在记事本中打开文件时，它具有以下模式：

HTML CODE (Correspoding to the PHP file) HTML CODE（对应于PHP文件）
ASCII CHARACTERS (which I thought corresponded to the PNG file) ASCII字符（我认为对应于PNG文件）
<body><html>

If I remove #1 and #3 and save the file locally, I get a valid PNG image. 如果删除＃1和＃3并将文件保存在本地，则将获得有效的PNG图像。

I am doing exactly what the example above says, but my results are different. 我完全按照上面的示例所述进行操作，但是结果却有所不同。 Why would the dataURL have any other info. 为什么dataURL还有其他信息。 other than the canvas itself? 除了画布本身？

Thanks. 谢谢。

Edit 编辑

<?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');
        }
}
?>

Answer 1

When you save the canvas in HTML5 you end up with a base64 string, at the start of this string is specific information about the image format. 当您将画布保存为HTML5时，将以base64字符串结尾，该字符串的开头是有关图像格式的特定信息。 You will need to strip this off, if you wish to save the base64 for conversion to a hard file later. 如果您希望保存base64以便以后转换为硬盘文件，则需要将其删除。 If you want to redraw the image onto a canvas (or some image control) you will need to prepend this information again. 如果要将图像重新绘制到画布（或某些图像控件）上，则需要再次添加此信息。

Here's how you save your file: 保存文件的方法如下：

var dataURL = document.getElementsByTagName("canvas")[0].toDataURL("image/png");

// strip off invalid data for saving
dataURL = dataURL.replace("data:image/png;base64,", "");

Now you can just convert your base64 string to an image and save to a hard file when you need to. 现在，您可以将base64字符串转换为图像，并在需要时保存到硬盘文件中。 If you want to display this image on a canvas again, here's how you do it: 如果要在画布上再次显示此图像，请按照以下步骤操作：

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

Answer 2

This worked for me - 这对我有用-

function SaveCanvasToFile(myFileName) 
{
   var link = document.createElement('a');
   link.textContent = 'download image';
   link.href = myCanvas.toDataURL('image/png', 1.0);
   link.download = myFileName;
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);    
}

This has the advantage that the file doesn't have to go to the server and then back down again. 这样做的好处是，文件不必先转到服务器，然后再回退。

HTML5将画布保存为PNG

问题描述

2 个解决方案

解决方案1
5 已采纳 2012-08-01 14:11:42

解决方案2
1 2019-02-21 14:38:28

HTML5将画布保存为PNG

问题描述

2 个解决方案

解决方案1 5 已采纳 2012-08-01 14:11:42

解决方案2 1 2019-02-21 14:38:28

解决方案1
5 已采纳 2012-08-01 14:11:42

解决方案2
1 2019-02-21 14:38:28