Mit html2Canvas mit HighCharts

Question

Ich möchte bei http://html2canvas.hertzen.com/documentation.html diskutiert html2canvas verwenden, um die HTML-Inhalte Bild zu konvertieren. Allerdings bekomme ich kein richtiges Bild von HighCharts. Auf IE10 wird ein leeres Bild gerendert und in Chrome wird ein Teil davon gerendert. Ist es möglich, html2canvas für diesen Zweck zu verwenden?

Answer 1

Highcharts verwendet svg Diagramme zu zeichnen. Sie müssen die canvg library verwenden, um diese svg in eine temporäre Arbeitsfläche zu zeichnen, und diese Arbeitsfläche dann entfernen, wenn Sie den Screenshot mit html2canvas erstellt haben. Hier

ist der Link für 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');