HTML5将画布保存为PNG

Question

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

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

HTML CODE（对应于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');
        }
}
?>

Answer 1

当您将画布保存为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);
    }
}

Answer 2

这对我有用-

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

这样做的好处是，文件不必先转到服务器，然后再回退。

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