无法在 Edge 浏览器上将画布另存为图像答案

【问题标题】：Can't save canvas as image on Edge browser无法在 Edge 浏览器上将画布另存为图像
【发布时间】：2017-12-25 02:40:03
【问题描述】：

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

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

不过，我也测试了许多小提琴项目，这些项目展示了如何将画布转换为图像。那些小提琴适用于铬，但不适用于边缘。一个例子小提琴是here

【问题讨论】：

我相信这是由于 CORS 问题。请查看 filesaver.js（正在处理 edge ing IE）

标签： javascript canvas html5-canvas fabricjs

【解决方案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);
});

【讨论】：

感谢更新小提琴。我已经测试了我的优势及其工作。
这个小提琴中的“Canvas 2 PNG”按钮应该做什么？
应该保存一张图片

【解决方案2】：

检查修改后的小提琴：

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

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

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

所以 edge 正在生成正确的 png，拒绝将其作为 dataUrl 重定向加载。可能是功能而不是错误。

【讨论】：