无法在边缘浏览器上将图像保存为图像

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

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

但我还测试了许多小提琴项目，它展示了如何将画布转换为图像。那些小提琴在铬上工作，但不在边缘。一个例子是小提琴here

来源

2017-07-19 gourab yousuf basir

我相信这是由于CORS问题。请看看filesaver.js（这是在边缘IE工作） – Observer

如果您使用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); 
});

来源

2017-07-20 15:27:02 Observer

感谢您的更新小提琴。我已经测试了我的优势和工作。 –

检查改性小提琴：

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

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

我增加的图像标记和和src属性设置为dataUrl到图像和它加载细。

所以边缘正在生成一个正确的PNG，拒绝加载它作为dataUrl重定向。可能是一个功能，而不是一个错误。

来源

2017-07-20 11:30:26 AndreaBogazzi

无法在边缘浏览器上将图像保存为图像

回答

相关问题