无法在Edge浏览器上将画布保存为图像

Question

我正在使用fabric js来开发我的网页应用。为了使用fabric js保存HTML5画布作为图像，我找到了下面的代码，在chrome和firefox浏览器中可以运行。但是当我在Microsoft Edge浏览器中运行相同的代码时，浏览器只会打开一个空白的新窗口而没有任何图像。

 $(".save").click(function () {
    canvas.deactivateAll().renderAll();
    window.open(canvas.toDataURL('png'));
});

但是我也测试了许多演示项目，展示了如何将画布转换为图像。这些演示在Chrome上可以工作，但在Edge上却不行。一个例子是这里。

- Yousuf

---

我认为这是由于CORS问题造成的。请查看filesaver.js文件（它在Edge和IE上可用）。 - Observer

Answer 1

如果您使用FileSaver.js，它可以在Edge上下载。要使用FileSaver.js，您需要将base64数据转换为blob数据。为此，请查看StackOverflow上的这篇文章。

这里是更新后的fiddle。

您需要将FileSaver.js包含到您的项目中，并且您的保存按钮将具有以下代码：

$("#canvas2png").click(function(){
    canvas.isDrawingMode = false;

    if(!window.localStorage){alert("This function is not supported by your browser."); return;}

    var blob = new Blob([b64toBlob(canvas.toDataURL('png').replace(/^data:image\/(png|jpg);base64,/, ""),"image/png")], {type: "image/png"});
      saveAs(blob, "testfile1.png");
});

另一种快速而简单的解决方案是将HTML数据写入新标签页，然后右键单击图像并保存。这种解决方案不需要任何插件或库。

您的保存将简单更改为：

  $("#canvas2png").click(function(){
    canvas.isDrawingMode = false;

    if(!window.localStorage){alert("This function is not supported by your browser."); return;}

       var html="<img src='"+canvas.toDataURL()+"' alt='canvas image'/>";
        var newTab=window.open();
        newTab.document.write(html);
});

- Observer

---

感谢提供更新后的代码示例。我已经在我的浏览器上测试过了，可以正常工作。 - Yousuf

这个 fiddle 中的 "Canvas 2 PNG" 按钮是用来做什么的？ - apiljic

应该保存一张图片。 - Observer

Answer 2

检查修改后的 fiddle：

http://jsfiddle.net/9hrcp/164/

document.getElementById('test').src = canvas.toDataURL('image/png');

我添加了一个图片标签，并将src属性设置为图像的dataUrl，它可以正常加载。

因此，Edge生成了一个正确的png，但拒绝将其作为dataUrl重定向加载。这可能是一种特性而不是错误。

- AndreaBogazzi