I'm trying to find a clean and consistent approach for downloading the contents of a canvas as an image file.

For Chrome or Firefox, I can do the following

// 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 + '">');

Since the above doesn't work in IE, I'm trying to build a Blob with the 'window.navigator.msSaveOrOpenBlob' function.

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

In the example above, do I really have to convert a canvas to base64, base64 to ArrayBuffer, and finally convert from base64 to blob? (Firefox has a 'canvas.toBlob' function, but again that's not available in IE). Also, this only works in IE10, not IE9.

Does anyone have any suggestions for a solution that will work in Chrome, Safari, Firefox, IE9, and IE10?

我想找一个干净的和一致的方式下载的内容帆布为一个图像文件。

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 Blob。msSaveOrOpenBlob”功能。

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的画布。toBlob功能,但又不是可用在IE)。这只在IE10浏览器工作,不是IE9。

有人有么建议的解决方案,将Chrome,Safari浏览器,Firefox,IE9,IE10浏览器?