在浏览器中将svg转换为png图像（包括IE在内的跨浏览器）

Question

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

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("<image src='" + mycanvas.toDataURL("image/png") + "'/>");
$.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'
});

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

public void getfile(string file)
{
    System.IO.File.WriteAllBytes(@"c:\yourfile.png", Convert.FromBase64String(file));
}

the entire code you can find here http://jsfiddle.net/gd7bB/2291/

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 IE9 Support for HTML5 Canvas tag .

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.

Answer 1

IE9 seem to indeed support the canvas element as per https://msdn.microsoft.com/fr-fr/library/ff975241(v=vs.85).aspx

The following sample/test code for toDataURL works for me in IE11 : http://samples.msdn.microsoft.com/Workshop/samples/canvas/todataurl.html

The fiddle you gave does not work in IE11 ; looking at the console errors, it leads to the fact that you cannot call drawImage before the image has finished its rendering. IE Throws a

call to unsupported method or attributes of a method

Adding a setTimeout allow IE to render the dynamic image and bypass this error.

But it then leads to a

Security Error

because it seems that IE has tainted the canvas because of some "cross origin" issue

SecurityError
The img or video element is not of the same origin or domain
as the document that owns the canvas element. Versions earlier
than Internet Explorer 10 use SECURITY_ERR.

IE seems to be tainting all images filled with SVG for security reasons - SVG tained canvas IE security error toDataURL

I managed to have a working version using canvg , which transforms an SVG file into canvas instructions - https://github.com/gabelerner/canvg

the solution boils down to

var svg = Highcharts.getSVG(charts);
var mycanvas = document.createElement('canvas');
canvg(mycanvas, svg)
console.log(mycanvas.toDataURL("image/png"))

check this fiddle http://jsfiddle.net/6bxqbaeb/1/ which works in IE11