gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 17:49:39 25 4
gpt4 key购买 nike

我正在为我的网络应用程序使用 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

最佳答案

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

关于javascript - 无法在 Edge 浏览器上将 Canvas 另存为图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45197097/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com