7

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

对于 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 的解决方案有任何建议？

4

1 回答 1

5

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

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

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

于 2013-11-02T03:59:34.420 回答