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.
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments