在 IE 中本地保存画布答案

【问题标题】：saving canvas locally in IE在 IE 中本地保存画布
【发布时间】：2013-04-10 16:25:17
【问题描述】：

您好，我想在 IE 中本地保存一个画布。

  var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

我无法通过以下方式下载它。

1) document.execCommand("SaveAs"..
2) window.location.href = img;
3) $.fileDownload(img);  // jquery download file library-
4) canvas2image // cross domain problem.

有没有办法在 IE 中本地保存画布而没有 base64 或跨域问题？非常感谢。

【问题讨论】：

local-storage 标签的含义与您认为的含义不同。
你说的是哪个版本的IE？ IE10？
正如 epascarello 所暗示的，本地存储实际上意味着一个特殊的防火墙存储区域，您的浏览器可以在其中存储/检索特定于您网站的字符串（如您的 dataURL）。你不能将你的 dataURL 保存到用户的文件系统中——至少现在还没有（我听说过将来会允许这样做）。因此，现在，只需将您的图像从服务器退回，让用户将其保存到他们的本地文件系统。
是IE9。 @markE我使用window.location.href = img将dataurl保存到用户本地系统。它适用于除移动设备和 IE 之外的所有浏览器。

标签： javascript html internet-explorer canvas download

【解决方案1】：

我知道这已经晚了，但我在寻找做同样事情的过程中偶然发现了这个问题，我想分享一个对我有用的解决方案。

假设您已经有一个数据 URI，您可以创建一个 blob，然后使用 msSaveBlob 或 msSaveOrOpenBlob

例子：

dataURItoBlob = function(dataURI) {
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type: 'image/png'});
    }

var blob = dataURItoBlob(uri);
window.navigator.msSaveOrOpenBlob(blob, "my-image.png");

我的大部分解决方案都使用了这个answer。

输入此内容后，我意识到这并不能真正帮助您解决跨域问题，因此充其量只是部分答案。有了这个，我只能说如果跨域是一个问题，请考虑尽可能使用数据 URI。

【讨论】：

这就是答案。

【解决方案2】：

好吧，看起来这在 IE 中也不起作用，但是由于您没有列出它，所以我将提供一个示例。这使用了HTML5 download attribute (more here)，并允许用户单击链接，然后下载文件。

<a href="data:text/html;base64,PCF...." download="file.png"></a>

【讨论】：