如何将画布保存为png图像？

Question

我有一个画布元素，其中有一个绘图，我想创建一个按钮，当点击它时，它将把图像保存为一个png文件。因此它应该打开“保存、打开、关闭”对话框...

我使用这个代码

var canvas = document.getElementById("myCanvas");
window.open(canvas.toDataURL("image/png"));

但当我在IE9中测试它时，一个新窗口打开了，上面写着“网页无法显示”，其url是：

有人知道怎么解决这个吗？

Answer 1

试试看：

var canvas = document.getElementById("alpha");
var dataURL = canvas.toDataURL("image/png");
var newTab = window.open('about:blank','image from canvas');
newTab.document.write("<img src='" + dataURL + "' alt='from canvas'/>");

这会在新页面上显示画布上的图像，但如果您在新选项卡中有打开弹出窗口设置，则会在地址栏中显示关于:blank。

编辑：-尽管window.open（“”）在FF或Chrome中不起作用，但下面的工作虽然呈现与canvas上显示的有些不同，但我认为透明度是问题所在：

window.open(canvas.toDataURL('image/png'));