title: In browser conversion of svg to png image (cross browser including IE)
body: <p>I am using Highcharts and i need to convert all the charts on the page to an image that i can send to my server so i can merge it to a master export excel which already contains some tables and pivot grids.
  This is my code so far</p>
  
  <pre><code>var svg = Highcharts.getSVG(charts);
  img = new Image();
  img.src = "data:image/svg+xml," + encodeURIComponent(svg);
  mycanvas = document.createElement('canvas');
  mycanvas.width = 1000
  mycanvas.height = 1000
  ctx = mycanvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  $("body").append("&lt;image src='" + mycanvas.toDataURL("image/png") + "'/&gt;");
  $.ajax({
      type: "POST",
      url: '@Url.Action("getfile")',
      data: JSON.stringify({ file: mycanvas.toDataURL("image/png").replace("data:image/png;base64,", "") }),
      contentType: 'application/json; charset=utf-8'
  });
  </code></pre>
  
  <p>This is the c# code where i tested if i get the data correctly from the client(i just write the base64 string to a file). Firefox and Chrome write the image correctly, IE just give me a black image</p>
  
  <pre><code>public void getfile(string file)
  {
      System.IO.File.WriteAllBytes(@"c:\yourfile.png", Convert.FromBase64String(file));
  }
  </code></pre>
  
  <p>the entire code you can find here
  <a href="http://jsfiddle.net/gd7bB/2291/" rel="nofollow noreferrer">http://jsfiddle.net/gd7bB/2291/</a></p>
  
  <p>The image seems to be generated fine in Firefox and Chrome, but not IE(here i just get a black image). I am using a canvas which from what i gathered IE supports <a href="https://stackoverflow.com/questions/5016513/ie9-support-for-html5-canvas-tag">IE9 Support for HTML5 Canvas tag</a>.</p>
  
  <p>If you could help me figure out what i'm doing wrong, or maybe you can point the way of a better solution i would much appreciate it.</p>