HTML畫布到blob到IE9中的可下載文件，10

Question

我正在嘗試找到一種干凈且一致的方法來將畫布的內容下載為圖像文件。

對於Chrome或Firefox，我可以執行以下操作

// Convert the canvas to a base64 string
var image = canvas.toDataURL();
image = image.replace(/^data:[a-z]*;/, 'data:application/octet-stream;');

// use the base64 string as the 'href' attribute 
var download = $('<a download="' + filename + '" target="_blank" href="' + image + '">');

由於以上在IE中不起作用，我正在嘗試使用'window.navigator.msSaveOrOpenBlob'函數構建一個Blob。

var image = canvas.toDataURL();
image = image.replace(/^data:[a-z]*;,/, '');

// Convert from base64 to an ArrayBuffer
var byteString = atob(image);
var buffer = new ArrayBuffer(byteString.length);
var intArray = new Uint8Array(buffer);
for (var i = 0; i < byteString.length; i++) {
    intArray[i] = byteString.charCodeAt(i);
}

// Use the native blob constructor
blob = new Blob([buffer], {type: "image/png"});

// Download this blob
window.navigator.msSaveOrOpenBlob(blob, "test.png");

在上面的例子中，我真的必須將畫布轉換為base64，base64轉換為ArrayBuffer，最后從base64轉換為blob嗎？ （Firefox有一個'canvas.toBlob'功能，但在IE中也沒有這個功能）。 此外，這僅適用於IE10，而不適用於IE9。

有沒有人對Chrome，Safari，Firefox，IE9和IE10的解決方案有任何建議？

Answer 1

是的，你必須做所有額外的步法。

toBlob在Chrome和FF支持非常近，即使它已經在規范了好幾年。 最近，當MS制造IE9和10時，它甚至都不在雷達上。

不幸的是，MS沒有改變IE9或IE10畫布實現的意圖，這意味着它們將永遠存在，存在錯誤和缺失部分。 （IE10畫布有幾個IE9沒有的錯誤，在IE11中再次修復。 就像這個寶石一樣。這是一個真正的混淆。）