Использование html2Canvas с HighCharts

Question

Я хочу использовать html2canvas, обсуждаемый в http://html2canvas.hertzen.com/documentation.html, чтобы преобразовать содержимое html в изображение. Однако я не получаю изображение HighCharts правильно. В IE10 он отображает пустое изображение, а на Chrome он отображает его часть. Можно ли использовать html2canvas для этой цели.

Answer 1

Highcharts использует svg для рисования диаграмм. Вам нужно будет использовать библиотеку canvg для рисования этого svg во временном холсте, а затем удалить этот холст, как только вы сделаете скриншот, используя html2canvas.

Вот ссылка на canvg: 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');