将 DataURL img 拖到火狐浏览器的桌面上，或制作真正的 png

Drag DataURL img to desktop in Firefox, or make real png

本文关键字：png 桌面 img DataURL 火狐浏览器      更新时间：2023-09-26

我有这个函数将画布内容转换为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=""/>

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

如果只想让用户直接将画布下载为 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>

演示 （JSFiddle）（在Firefox和Chrome中测试）

另请参阅此问题，其中提供了更多信息。

相关文章：