Question

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

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

然而，我还测试了很多小提琴项目，展示了如何将画布转换为图像。那些小提琴适用于镀铬但不是边缘。一个示例小提琴是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);
});

Answer 2

检查修改过的小提琴： http://jsfiddle.net/9hrcp/164/ document.getElementById（＆＃39; test＆＃39;）。src = canvas.toDataURL（＆＃39; image / png＆＃39;）; 我添加了一个图像标记，并将src属性设置为dataUrl到图像，并加载正常。所以edge正在生成一个正确的png，拒绝将其作为dataUrl重定向加载。可能是一个功能，而不是一个错误。

无法在Edge浏览器

2 个答案: