1

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

1 回答 1

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>

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

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

于 2013-10-16T12:39:54.730 回答