HTML5canvas到PNG文件
我试图将HTML5canvas转换为图像。 这是我到目前为止：
var tmp_canvas = document.getElementById('canvas'); var dataURL = tmp_canvas.toDataURL("image/png"); $('#thumbnail_list').append($('<img/>', { src : dataURL }).addClass('image')); 但问题是，我得到这个代码：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt+XCAAAgAElEQVR4nNS6Z1xVaZbvv/c+CVOZc6mYEMlJMZRizgljGRARs6AgOSMGQATBSM5ZyTkoOQkSzJWrp3t6etLt6Z7pmf/c++L7f3EOiBZW2dM9dz73xfdzztl7n3Oe/Txrrd9a69mCTC4gkwvIZAKSTECUBARRQBA+jii+46f.......class="image">
我想要一个正常的图像path，用户可以下载！
任何帮助？
信息： IE10 +根本不支持以下方法。 其他人已经完成了这项工作并实现了跨浏览器解决scheme 这是其中之一。
首先，将生成的数据URL添加到<a>标签的href属性中。 但是在一些浏览器上，这本身不会触发下载。 相反，它会在新页面中打开链接的图像。
下载对话框为一个base64图像：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...." class="image" />
根据上面的例子，将数据URL的MIMEtypes转换为：
<a href="data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUg....">Download</a>
通过告诉浏览器数据是application/octet-stream ，它会要求您将其保存在硬盘上。
指定文件名：
正如Adi在下面的评论中所说的那样，没有标准的方法来使用这个方法来定义一个文件名。 但是，有两种方法可能在某些浏览器中工作。
A）由Google Crome引入的download属性
<a download="image.png" href="...">
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">
这至less在一些旧版本的Opera中起作用。 这里是关于这个的一些讨论。
研究主要浏览器的Bug / Feature-Tracking系统显示，定义一个文件名是社区的一个非常大的愿望。 也许我们会在不久的将来看到跨浏览器兼容的解决scheme！ ;）
保存RAM和CPU资源：
如果您不想膨胀访客浏览器的内存，也可以dynamic生成数据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);
这样，您的canvas仍然可以通过浏览器显示为图像文件。 如果你想提高打开下载对话框的可能性，你应该扩展上面的function，以便它可以进行如上所示的replace：
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 <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>
你有2个选项（都可以在几乎所有的浏览器上运行）：
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- 提示用户使用 Downloadify 进行 下载
<div id="clickMe"></div> Downloadify.create( 'clickMe', { data: base64String, dataType: 'base64', filename: 'something.png' });
您可以使用reimg库将canvas转换为图像对象，甚至可以触发用户的下载。
在你的页面中插入库后，只需使用这个： ReImg.fromCanvas(yourCanvasElement).downloadPng()
您也可以考虑使用Concrete.js http://www.concretejs.com ，这是一个轻量级的HTML5 Canvas框架，可以实现像这样的外围设备，包括下载。 你只需要这样做：
canvas.download({ fileName: 'my-file.png' });
你完成了。
