javascript - 无法在 Edge 浏览器上将 Canvas 另存为图像

Question

我正在为我的网络应用程序使用 fabric js。为了使用 fabric js 将 HTML5 canvas 保存为图像，我发现以下代码适用于 chrome 和 firefox 浏览器。但是当我在 Microsoft Edge 中运行相同的代码时，浏览器只会打开一个空白的新窗口，上面没有任何图像。

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

不过，我还测试了许多展示如何将 Canvas 转换为图像的 fiddle 项目。这些 fiddle 适用于 chrome 但不适用于边缘。一个示例 fiddle 是 here

Answer 1

如果您将使用 FileSaver.js，它将在 Edge 上下载。要使用 FileSaver.js，您需要将 base64 数据转换为 blob 数据。为此，请检查 this post on 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);
});