score:1

Accepted answer

Internet Explorer does not support download attribute on anchor tags. So for Internet Explorer, you can try the following code

window.navigator.msSaveBlob(canvas.msToBlob(), "svg-graph.png");

Completed code:

function isIE() {
  var userAgent = window.navigator.userAgent;
  return userAgent.indexOf("MSIE ") > -1 || userAgent.indexOf("Trident/") > -1;
}
image.onload = function () {
   context.drawImage(image, 0, 0);
   if(isIE()){ 
      window.navigator.msSaveBlob(canvas.msToBlob(), "svg-graph.png");
   } else{
      var a = document.createElement("a");
      a.download = "svg-graph.png";
      a.href = canvas.toDataURL("image/png");
      a.click();
   }
};

score:3

Drawing an svg image onto a canvas did taint the canvas in IE < Edge ( and in latest Safari if a <foreignObject> is in the svg being drawn), for security reasons.

Hence, when you right click the drawn canvas, you can't anymore access the save image as... functionality.

However, in these browsers, you can just right click the original svg element and choose save image as... => yourFile.png.

So the solution is either to first try to render the svg on the canvas, then check if it was tainted by calling its toDataURL() method in a try-catch block, or to do some UA-string spoofing and directly send some notice to the user to right click the image and do it by himself...

Note that even if the canvas is tainted, it has nothing to do with cross-origin-resources in your case.


Related Query