無法在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重定向加載。 可能是功能而非錯誤。