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

Question

我正在尝试使用uri下载png文件（以下代码）。 它可以在Chrome，Firefox和Safari中运行，但不能（当然）在Internet Explorer中。 我在Windows 7上，因此我在Edge Document Mode中使用IE11。 错误是“传递给系统调用的数据区域太小”。 我已经阅读了此MDN帖子

IE9和更高版本以及Edge支持CSS和JS文件中的数据URI，但不支持HTML文件中的数据URI，最大大小为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

解决方案如下。 我似乎找不到提供功劳的链接，但这解决了它。 而不是先将画布转换为uri，而是传递画布并转换为uri并使用链接下载，或者（对于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);
  }
}