How do you download a image/png data URI in Edge?
<p>I am trying to export an SVG created in the browser (a d3.js chart) as a PNG using methods based from <a href="https://github.com/exupero/saveSvgAsPng" rel="noreferrer">https://github.com/exupero/saveSvgAsPng</a> and <a href="http://techslides.com/save-svg-as-an-image" rel="noreferrer">http://techslides.com/save-svg-as-an-image</a>. The SVG is converted to a data URI and rendered as an image in a canvas, which is converted to a PNG data URI.  This URI is downloaded as a file using an anchor tag.  I have been able to confirm this to work in current versions of FF, Chrome, and Safari; however, triggering the download on the anchor tag causes Edge to either hang (with only a doctype warning in the console) or crash completely.  Is there anyway to get this to work in Edge or is the anchor download with data URI not fully supported yet?</p>

<p>Code created from the sources above:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//this gets the svg and inlines all styles.  It has a property "source" as well as width and height of the SVG.
var svgDownload = getElementChildrenAndStyles(svgID);

var image = new Image();

image.onload = function () {
  var canvas = document.createElement('canvas');
  canvas.width = svgDownload.width;
  canvas.height = svgDownload.height;
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = "#FFFFFF";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(image, 0, 0);

  var a = document.createElement("a");
  a.download = "chart.png";
  try {
    console.log("converting canvas");
    a.href = canvas.toDataURL("image/png");
    console.log("canvas converted. triggering download");
    document.body.appendChild(a);
    a.addEventListener("click", function(e) {
      a.parentNode.removeChild(a);
    });
    a.click();
  }
  catch (e){
    //error handling
  }

};
try {
  console.log("making image source url");
  //both methods of creating the image source here work in most browsers except Edge
  //image.src = "data:image/svg+xml;base64," + btoa( svgDownload.source.join() );
  image.src = window.URL.createObjectURL(new Blob(svgDownload.source, {"type": 'image/svg+xml;base64'}));
  console.log("image source set");
}
catch (e){
  //error handling
}</code></pre>
</div>
</div>
</p>