我有这个函数可以将 Canvas 内容转换为 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=""/>
最佳答案
您的 goNinjaAndTurnIntoRealPng() 方法仅在您将图像数据发送到服务器并将其保存在那里时才有效(为了获得像 "../local/img.png 这样的路径") - 取决于您的应用程序是否有意义。
如果您只是想让用户直接下载 PNG 格式的 Canvas ，您可以按如下方式触发图像下载。就我个人而言，我更喜欢这种方法，因为用户不必手动单击“另存为” - 它更有用。
<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其中提供了更多信息。
关于javascript - 将数据 URL 图片拖到 Firefox 桌面上，或制作真正的 png，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19397883/