在Firefox中将数据URL图像拖到桌面，或制作真正的png答案

【问题标题】：Drag DataURL img to desktop in Firefox, or make real png在Firefox中将数据URL图像拖到桌面，或制作真正的png
【发布时间】：2013-10-24 05:46:51
【问题描述】：

我有这个功能可以将画布内容转换为 PNG 数据。

function saveImage()
{
    var img = canvas.toDataURL("image/png");
    var imgWin = window.open('','', 'width=880, height=720');

    imgWin.document.write('<!doctype html><html><head></head>' +
            '<body> <img src="' + img +'" alt=""/> </body> </html>');   
}

像一个魅力一样工作，并将 png 正确地放在屏幕上，就像它应该的那样。现在我可以轻松地将它拖放到桌面在 Chrome 中。

但在 Firefox 中，我最终得到了一个链接，而在 IE（我并不真正关心我正在构建的应用程序支持它）中，它根本不会拖动。

我知道这与浏览器处理 DataURL 的方式有关。但是有没有办法将此 DataURL-png 转换为真实图像，将其保存到缓存或其他我可以读取的地方？

所以这个

var img = canvas.toDataURL("image/png");
<img src="' + img +'" alt=""/>

会变成这样的：

var img = canvas.toDataURL("image/png");
img.goNinjaAndTurnIntoRealPng()
<img src="../local/img.png" alt=""/>

【问题讨论】：

标签： javascript html png data-url

【解决方案1】：

您的goNinjaAndTurnIntoRealPng() 方法仅在您将图像数据发送到服务器并将其保存在那里（为了获得类似"../local/img.png" 的路径）时才有效 - 取决于您的应用程序是否有意义。

如果您只想让用户直接将画布下载为PNG，您可以按如下方式触发图像下载。就个人而言，我更喜欢这种方法，因为用户不必手动单击“另存为”——它更实用。

<canvas id="canvas" width="880" height="720"></canvas><br>
<!-- Note the "download" attribute here that specifies a filename -->
<a download="canvas_image.png" id="click">Save PNG image</a>

<script>
    var canvas = document.getElementById("canvas");
    document.getElementById("click").onclick = function(){
        this.href = canvas.toDataURL("image/png");
    };
</script>

Demo (JSFiddle) （在 Firefox 和 Chrome 中测试）

另请参阅this question，它提供了更多信息。

【讨论】：

谢谢。我实际上最终使用了下载属性，就像你的例子一样。像这样：'