How to upload image / PNG URIs to Edge?

Question

I am trying to export the SVG created in the browser (diagram d3.js) as PNG using methods based on https://github.com/exupero/saveSvgAsPng and http://techslides.com/save-svg-as- an-image . The SVG is converted to a data URI and displayed as an image in a canvas that is converted to a PNG data URI. This URI is loaded as a file using a binding tag. I was able to confirm this to work in current versions of FF, Chrome, and Safari; however, starting the download on the anchor tag causes Edge to either hang (only with a doctype warning in the console), or completely crash. Is there anyway to get this to work in Edge or to load an anchor with URI data that is not yet fully supported?

Code generated from the following sources:

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

Answer 1

Understand this is an old question, but for others that are here: Edge and IE do not support dataURL as the href of an attached tag. However, it will accept it as the source of the img tag. The best solution I could come up with is to use download.js to download the file. However, the next problem you will encounter is when you set the src of the image tag to SVG to perform PNG rendering, the load event will not fire in Edge for this Image object. There is no way yet.