Internet Explorer - 传递给系统调用的数据区域太小 - 使用 uri 下载 png

Question

我正在尝试使用 uri（下面的代码）下载一个 png 文件。它适用于 Chrome、Firefox 和 Safari - 但（当然）不适用于 Internet Explorer。我在 Windows 7，所以我在边缘文档模式下使用 IE11。错误是 "The data area passed to a system call is too small." 我读过 this MDN post

IE9 and later, as well as Edge, supports data URIs in CSS and JS files, but not in HTML files, with a max size of 4GB.

我的 URI 只有 1410 字节（使用 uri.length）。任何想法为什么我会收到这种大小的数据错误以及如何解决它？

下载功能：

function downloadURI(uri, name) {
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    delete link;
}

uri 格式：

"data:image/png;base64,iVBORw0KGgo ETC..."

Answer 1

解决方法如下。我似乎无法找到 link 来给予信任，但这解决了它。我没有先将 canvas 转换为 uri，而是传递 canvas 并转换为 uri 并使用 link 下载，或者（对于 IE）我转换为 blob 并使用 canavas.msToBlob() 和 msSaveBlob()

function downloadURI(canvas, name) {
  if (navigator.msSaveBlob) { // IE10+
    var blob = canvas.msToBlob();
    return navigator.msSaveBlob(blob, name);
  } else {
    var uri = canvas.toDataURL("image/png")
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    if (link.click) {
      link.click();
    } else {
      var event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, true, window);
      link.dispatchEvent(event);
    }
    document.body.removeChild(link);
  }
}

Internet Explorer - 传递给系统调用的数据区域太小 - 使用 uri 下载 png

Internet Explorer - The data area passed to a system call is too small - Downloading png with the uri

javascript

internet-explorer

png

uri