title: Using toDataUrl on a canvas result in SecurityError in IE
body: <p>Hi I am in need of converting an svg generated by d3.js into a png.This is requried because we are sending our page html to the server that is then passed to ABCPDF and then convert to a pdf file.</p>
  
  <p>We absolutely must support IE9+ the latest version of chrome and latest version of firefox.This is what I have so far:</p>
  
  <pre><code>    var canvas = document.createElement("canvas");
      canvas.setAttribute("width", 360);
      canvas.setAttribute("height", 460);
      var ctx = canvas.getContext("2d");
      var DOMURL = self.URL || self.webkitURL || self;
      var img = new Image();
      var svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
      var url = DOMURL.createObjectURL(svg);
      img.onload = function () {
          ctx.drawImage(img, 0, 0);
          var png = canvas.toDataURL("image/png");
          $('#main-chart').append('&lt;img src="' + png + '"/&gt;');
          $('#main-chart svg').remove("svg");
          DOMURL.revokeObjectURL(png);
      };
      img.src = url;
  </code></pre>
  
  <p>Now this solution works very well on chrome and firefox but for IE it does not work.</p>
  
  <p>When canvas.toDataURL("image/png") gets called a Security error gets thrown.</p>
  
  <p>From what I managed to find online is that this happens because IE does not support CORS when calling toDataUrl().</p>
  
  <p>Has anyone managed to find a work around to this issue?</p>
  
  <p>I have seen other similar questions asked at stackoverflow but could not find one with a solution.</p>