Question

我有此功能可将画布内容转换为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=""/>

Answer 1

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

如果您只是想让用户直接将画布下载为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，其中提供了更多信息。

在Firefox中将数据URL图像拖到桌面，或者进行真正的png

1 个答案: