HighChartsでのhtml2Canvasの使用

Question

http://html2canvas.hertzen.com/documentation.htmlで議論されたhtml2canvasを使用して、htmlコンテンツを画像に変換したいと考えています。しかし、私はHighChartsのイメージを正しく取得していません。 IE10では空白の画像をレンダリングし、Chromeではその一部をレンダリングします。この目的のためにhtml2canvasを使用することは可能ですか？

Answer 1

ハイチャートはsvgを使用してグラフを描画します。このsvgを一時キャンバスに描画するにはcanvgライブラリを使用し、html2canvasを使用してスクリーンショットを撮るとキャンバスを削除する必要があります。 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');