html5保存png,HTML5画布PNG文件(HTML5 Canvas to PNG File)

信息：IE10 +不低于方法支持在所有。 其他人已经做的工作​​，并实现了跨浏览器的解决方案。 这是其中之一。

首先，将生成的数据URL添加到href的属性标签。 然而在某些浏览器，仅此一点就不会触发下载。 相反，它会在新页面中打开链接的图像。

下载对话框一个base64图像：

根据上面的例子中，转换MIME类型的数据的URL此的：

Download

告诉该数据在浏览器application/octet-stream ，它会要求你将它保存在硬盘上。

指定文件名：

正如阿迪在下面的评论说，有是定义使用这种方法的文件名没有标准的方式。 但是，也有可能在某些浏览器工作的两种方法。

A)的download属性由谷歌推出克罗默

B)定义数据的URL内的HTTP标头

headers=Content-Disposition: attachment; filename=image.png

这在一些老版本的Opera至少工作。 下面是关于这一些讨论。

展望主流浏览器的Bug /功能跟踪系统显示，定义文件名是社区的相当大的希望。 也许我们会看到在不久的将来，一个跨浏览器兼容的解决方案！ ;)

保存内存和CPU ressources：

如果你不希望你的臃肿访问者的浏览器的RAM，还可以动态地生成数据网址：

Download Canvas

function dlCanvas() {

var dt = canvas.toDataURL('image/png');

this.href = dt;

};

dl.addEventListener('click', dlCanvas, false);

这样一来，你的画布可能仍然显示为您的浏览器中的图像文件。 如果你想增加的可能性打开下载对话框，你应该扩展功能上面，所以它确实如上图所示的更换：

function dlCanvas() {

var dt = canvas.toDataURL('image/png');

this.href = dt.replace(/^data:image\/[^;]/, 'data:application/octet-stream');

};

dl.addEventListener('click', dlCanvas, false);

最后，添加HTTP头，使多余相信大多数浏览器都提供一个有效的文件名给你！ ;)

完整的例子：

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 '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); Download Canvas