Utilizzo di html2Canvas con HighCharts

Question

Desidero utilizzare html2canvas discusso allo http://html2canvas.hertzen.com/documentation.html per convertire il contenuto html in immagine. Tuttavia non ricevo correttamente l'immagine di HighCharts. Su IE10 esegue il rendering dell'immagine vuota e su Chrome ne esegue una parte. È possibile utilizzare html2canvas per questo scopo.

Answer 1

Highcharts utilizza svg per disegnare grafici. Dovrai usare la libreria canvg per disegnare questo svg su una tela temporanea e quindi rimuovere quella tela una volta catturato lo screenshot usando html2canvas.

Ecco il link per canvg: https://code.google.com/p/canvg/downloads/list

Prova questo:

//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');