Javascript HTML5 画布到 PNG 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12796513/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas to PNG File
提问by Test Test
I am trying to convert an HTML5 canvas to an image. This is what I got so far:
我正在尝试将 HTML5 画布转换为图像。这是我到目前为止得到的：
var tmp_canvas = document.getElementById('canvas');
var dataURL = tmp_canvas.toDataURL("image/png");
$('#thumbnail_list').append($('<img/>', { src : dataURL }).addClass('image'));
but the problem is that I get this code:
但问题是我得到了这个代码：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt+XCAAAgAElEQVR4nNS6Z1xVaZbvv/c+CVOZc6mYEMlJMZRizgljGRARs6AgOSMGQATBSM5ZyTkoOQkSzJWrp3t6etLt6Z7pmf/c++L7f3EOiBZW2dM9dz73xfdzztl7n3Oe/Txrrd9a69mCTC4gkwvIZAKSTECUBARRQBA+jii+46f.......class="image">
I want a normal image path that the user can download!
我想要一个用户可以下载的普通图像路径！
Any help?
有什么帮助吗？
回答by Nippey
Info:IE10+ doesn't support below method at all. Other people already did the work and implemented cross browser solutions. Thisis one of them.
信息：IE10+ 根本不支持以下方法。其他人已经完成了这项工作并实施了跨浏览器解决方案。 这是其中之一。
First, add the generated data URL to the hrefattribute of an <a>tag.
However on some browsers, this alone will not trigger a download. Instead it will open the linked image in a new page.
首先，将生成的数据 URL 添加到标签的href属性中<a>。但是，在某些浏览器上，仅此一项不会触发下载。相反，它将在新页面中打开链接的图像。
Download dialog for a base64 image:
base64 图像的下载对话框：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...." class="image" />
Based on above example, convert the MIME type of the data URL to this:
根据上面的例子，将数据 URL 的 MIME 类型转换为：
<a href="data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUg....">Download</a>
By telling the browser that the data are application/octet-stream, it will ask you to save it on your hard-disk.
通过告诉浏览器数据是application/octet-stream，它会要求您将其保存在硬盘上。
Specifying a filename:指定文件名：
As Adisaid in the comments below, there is no standard way to define a filename using this method. But, there are two approaches which might work in some browsers.
正如Adi在下面的评论中所说，没有使用这种方法定义文件名的标准方法。但是，有两种方法可能适用于某些浏览器。
A) The downloadattribute introduced by Google Crome
A) downloadGoogle Crome 引入的属性
<a download="image.png" href="...">
B) Defining HTTP headers within the data URLheaders=Content-Disposition: attachment; filename=image.png
B) 在数据 URL 中定义 HTTP 标头headers=Content-Disposition: attachment; filename=image.png
<a href="data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=image.png;base64,iVBORw0KGgoAAAA">
This worked at least in some older versions of Opera. Hereis some discussion about this.
这至少在一些旧版本的 Opera 中有效。 这里有一些关于这个的讨论。
Looking into the Bug/Feature-Tracking systems of the major browsers shows that defining a filename is quite a big wish of the community. Maybe we will see a cross-browser compatible solution in near future! ;)
查看主要浏览器的错误/功能跟踪系统表明，定义文件名是社区的一个很大的愿望。也许在不久的将来我们会看到一个跨浏览器兼容的解决方案！;)
Save RAM and CPU ressources:节省 RAM 和 CPU 资源：
If you don't want to bloat the RAM of your visitor's browser, you can also generate the data URL dynamically:
如果您不想使访问者浏览器的 RAM 膨胀，您还可以动态生成数据 URL：
<a id="dl" download="Canvas.png">Download Canvas</a>
function dlCanvas() {
var dt = canvas.toDataURL('image/png');
this.href = dt;
};
dl.addEventListener('click', dlCanvas, false);
This way, your canvas may still be shown as an image file by your browser. If you want to increase the probability to open a download dialog, you should extend the function above, so that it does the replacement as shown above:
这样，您的画布可能仍会被浏览器显示为图像文件。如果你想增加打开下载对话框的概率，你应该扩展上面的函数，以便它进行如上所示的替换：
function dlCanvas() {
var dt = canvas.toDataURL('image/png');
this.href = dt.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
};
dl.addEventListener('click', dlCanvas, false);
Last, add the HTTP header to make extra sure that most browsers offer a valid filename to you! ;)
最后，添加 HTTP 标头以确保大多数浏览器为您提供有效的文件名！;)
FULL EXAMPLE:完整示例：
var canvas = document.getElementById("cnv");
var ctx = canvas.getContext("2d");
/* FILL CANVAS WITH IMAGE DATA */
function r(ctx, x, y, w, h, c) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.strokeStyle = c;
ctx.stroke();
}
r(ctx, 0, 0, 32, 32, "black");
r(ctx, 4, 4, 16, 16, "red");
r(ctx, 8, 8, 16, 16, "green");
r(ctx, 12, 12, 16, 16, "blue");
/* REGISTER DOWNLOAD HANDLER */
/* Only convert the canvas to Data URL when the user clicks.
This saves RAM and CPU ressources in case this feature is not required. */
function dlCanvas() {
var dt = canvas.toDataURL('image/png');
/* Change MIME type to trick the browser to downlaod the file instead of displaying it */
dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
/* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');
this.href = dt;
};
document.getElementById("dl").addEventListener('click', dlCanvas, false);<canvas id="cnv" width="32" height="32"></canvas>
<a id="dl" download="Canvas.png" href="#">Download Canvas</a>回答by gillyb
You can use the reimglibrary to convert the canvas to an image object, and even trigger the download for the user.
您可以使用reimg库将画布转换为图像对象，甚至可以为用户触发下载。
After you insert the library in your page, just use this :
ReImg.fromCanvas(yourCanvasElement).downloadPng()
在页面中插入库后，只需使用以下命令：
ReImg.fromCanvas(yourCanvasElement).downloadPng()
回答by Adi
You have 2 options (both work on almost all browsers):
您有 2 个选项（都适用于几乎所有浏览器）：
1- POST the data to the server:
On the server you'd have a script that will handle the data and then tell the browser to prompt the user for download.
1-将数据发布到服务器：
在服务器上，您将有一个脚本来处理数据，然后告诉浏览器提示用户下载。
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=something.png");
header("Content-Type: image/png");
echo base64_decode($_POST['imageData']);
exit;
2- Prompt the user for download usingDownloadify
2-使用Downloadify提示用户下载
<div id="clickMe"></div>
Downloadify.create( 'clickMe', {
data: base64String,
dataType: 'base64',
filename: 'something.png'
});
回答by Eric Rowell
You might also consider using Concrete.js http://www.concretejs.com, which is a light weight HTML5 Canvas framework that enables peripheral things like this, including downloads. You would just do this:
您也可以考虑使用 Concrete.js http://www.concretejs.com，它是一个轻量级的 HTML5 Canvas 框架，可以实现类似这样的外围功能，包括下载。你会这样做：
canvas.download({
fileName: 'my-file.png'
});
and you're done.
你就完成了。
