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

Question

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

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

但是，我还测试了许多小提琴项目，这些项目显示了如何将画布转换为图像。 这些小提琴在镀铬上起作用，但在边缘上不起作用。 这里有一个小提琴例子

Answer 1

如果您将使用FileSaver.js，它将在Edge上下载。 为了使用FileSaver.js，您需要将base64数据转换为Blob数据。 为此，请在StackOverflow上查看此信息

这是更新的小提琴

您需要将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);
});

Answer 2

检查修改过的小提琴：

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

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

我添加了一个图像标签，并将src属性设置为图像的dataUrl，并且加载良好。

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