HTML canvas to blob 到 IE9、10 中的可下载文件

Posted 2023-03-12

【中文标题】HTML canvas to blob 到 IE9、10 中的可下载文件

【英文标题】：HTML canvas to blob to downloadable file in IE9, 10

【发布时间】：2013-11-01 22:55:18

【问题描述】：

我正在尝试找到一种干净且一致的方法来将画布的内容下载为图像文件。

对于 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");

在上面的例子中，我真的必须将canvas转换为base64，将base64转换为ArrayBuffer，最后从base64转换为blob吗？ （Firefox 有一个 'canvas.toBlob' 功能，但同样在 IE 中不可用）。此外，这仅适用于 IE10，不适用于 IE9。

是否有人对适用于 Chrome、Safari、Firefox、IE9 和 IE10 的解决方案有任何建议？

【问题讨论】：

顺便说一句，您不需要剥离 data-uri 的标题 - 只需为 href example.IE 9 和 10 直接设置它不支持 download 属性（惊喜！）所以除了使用服务器来提供文件之外，没有简单的方法。

我刚刚为 IE10 添加了工作代码，但我仍在努力寻找在 IE9 中工作的代码。

【参考方案1】：

是的，你必须做所有额外的步法。

toBlob 在 Chrome 和 FF 中的支持是非常最近的，尽管它已经在规范中好几年了。太近了，以至于当 MS 制作 IE9 和 10 时，它甚至都没有引起人们的注意。

不幸的是，MS 无意更改 IE9 或 IE10 画布实现，这意味着它们将永远存在，有错误和缺失部分。 （IE10 画布有几个 IE9 没有的 bug，在 IE11 中再次修复。Like this gem. 真是一团糟。）