HighCharts ile html2Canvas kullanma

Question

html içeriğini görüntüye dönüştürmek için http://html2canvas.hertzen.com/documentation.html numaralı makalede anlatılan html2canvas kullanmak istiyorum. Ancak HighCharts'ın görüntüsünü düzgün bir şekilde alamıyorum. IE10'da boş resim oluşturur ve Chrome'da bunun bir parçasını oluşturur. Bu amaçla html2canvas kullanmak mümkün mü?

Answer 1

Highcharts grafik çizmek için svg kullanır. Bu svg'yi geçici bir tuvale çizebilmek için canvg kütüphanesini kullanmanız ve sonra html2canvas'ı kullanarak ekran görüntüsünü aldıktan sonra bu tuvali kaldırmanız gerekecektir. Bunu deneyin https://code.google.com/p/canvg/downloads/list

:

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