问题描述
我想使用 http://html2canvas.hertzen.com/documentation.html 讨论的html2canvas转换图像的html内容.但是我没有正确获得HighCharts的图像.在IE10上,它呈现空白图像,在Chrome上,它呈现空白图像.是否可以为此目的使用html2canvas.
I want to use html2canvas discussed at http://html2canvas.hertzen.com/documentation.html to convert the html content to image. However I am not getting image of HighCharts properly. On IE10 It renders blank image and on Chrome it renders a part of it. Is it possible to use html2canvas for this purpose.
推荐答案
Highcharts使用svg绘制图表.您将需要使用canvg库将此svg绘制到临时画布上,然后在使用html2canvas截取屏幕截图后将其删除.
Highcharts uses svg to draw charts. You will need to use canvg library for drawing this svg to a temporary canvas and then remove that canvas once you take the screenshot using html2canvas.
以下是canvg的链接: https://code.google.com/p/canvg/downloads/列表
Here is the link for 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');
这篇关于将html2Canvas与HighCharts结合使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!