Using html2Canvas with HighCharts

问题:

I want to use html2canvas discussed at http://html2canvas.hertzen.com/documentation.html to convert the html content to image. However I am not getting image of HighCharts properly. On IE10 It renders blank image and on Chrome it renders a part of it. Is it possible to use html2canvas for this purpose.

回答1:

Highcharts uses svg to draw charts. You will need to use canvg library for drawing this svg to a temporary canvas and then remove that canvas once you take the screenshot using html2canvas.

Here is the link for canvg : https://code.google.com/p/canvg/downloads/list

Try this:

//find all svg elements in $container //$container is the jQuery object of the div that you need to convert to image. This div may contain highcharts along with other child divs, etc var svgElements= $container.find('svg');  //replace all svgs with a temp canvas svgElements.each(function () {     var canvas, xml;      canvas = document.createElement("canvas");     canvas.className = "screenShotTempCanvas";     //convert SVG into a XML string     xml = (new XMLSerializer()).serializeToString(this);      // Removing the name space as IE throws an error     xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');      //draw the SVG onto a canvas     canvg(canvas, xml);     $(canvas).insertAfter(this);     //hide the SVG element     this.className = "tempHide";     $(this).hide(); });  //... //HERE GOES YOUR CODE FOR HTML2CANVAS SCREENSHOT //...  //After your image is generated revert the temporary changes $container.find('.screenShotTempCanvas').remove(); $container.find('.tempHide').show().removeClass('tempHide'); 

文章来源: Using html2Canvas with HighCharts