Używanie html2Canvas z HighCharts

Question

Chcę użyć html2canvas omawianego na http://html2canvas.hertzen.com/documentation.html, aby przekonwertować zawartość html na obraz. Jednak nie uzyskuję prawidłowego obrazu HighCharts. W IE10 renderuje czysty obraz, a w Chrome renderuje jego część. Czy można w tym celu użyć html2canvas?

Answer 1

Highcharts używa svg do rysowania wykresów. Będziesz musiał użyć biblioteki canvg do rysowania tego pliku SVG do tymczasowego płótna, a następnie usunąć to płótno po zrobieniu zrzutu ekranu za pomocą html2canvas.

Oto link do canvg: https://code.google.com/p/canvg/downloads/list

Spróbuj tego:

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