将 html2Canvas 与 HighCharts 一起使用

Question

我想使用http://html2canvas.hertzen.com/documentation.html 讨论的 html2canvas 将 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');