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

Question

I am trying to download a png file using the uri (code below). It works in Chrome, Firefox and Safari - but not (of course) in Internet Explorer. I am on Windows 7, so I am using IE11 in Edge Document Mode. The error is "The data area passed to a system call is too small." I've read in 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.

My URI is only 1410 bytes (using uri.length). Any ideas why I am getting the error with data of this size and how to fix it?

The download function:

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;
}

The uri format:

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

`delete link;` -> [`delete operator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete): _"Any property declared with var cannot be deleted from the global scope or from a function's scope."_ — Andreas, Jun 01 '17 at 05:14
https://stackoverflow.com/questions/20844644/why-am-i-getting-this-error-in-ie — Andreas, Jun 01 '17 at 05:20
@Andreas - I tried => `if (navigator.msSaveBlob) { return navigator.msSaveBlob(new Blob([uri], {type: "image/png"}), name);}` It downloaded fine, but the file could not be read as a PNG. Suggestions? — mseifert, Jun 01 '17 at 05:30
Try pasting `data:text/html,Hello folks` into the address bar - it worked in Firefox and Chrome but not in IE. Same result for a short, valid data URI for a PNG image. _IE appears unable to navigate to a data URI_. — traktor, Jun 01 '17 at 05:51
@Andreas - Thanks for your link. It gave me what I needed to search on and so found an answer, which I posted below. — mseifert, Jun 01 '17 at 06:14

score 3 · Accepted Answer · answered Jun 01 '17 at 06:11

The solution is below. I can't seem to find the link to give credit, but this solved it. Instead of converting the canvas to a uri first, I pass the canvas and either convert to a uri and download using a link or (for IE) I convert to a blob and use canavas.msToBlob() and 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 - The data area passed to a system call is too small - Downloading png with the uri

1 Answers1