使用html2canvas将带有highcharts图形的html转换为图像

我想将HTML页面转换为图像，当我使用下面的代码时，我得到的结果与我期望的不完全匹配。

html2canvas($("#sharedOne"), { onrendered: function (canvas) { console.log("canvas",canvas) var imgsrc = canvas.toDataURL("image/png"); console.log(imgsrc); } }); 

这是HTML的屏幕截图

这是运行上面代码的结果的屏幕截图。

当我使用下面的代码时，我收到一个错误：

 var canvas = document.getElementById('sharedOne'); console.log("CSSSS",canvas) var t = canvas.toDataURL("image/png"); console.log("chart",t) 

错误是：

错误canvas.toDataURL不是函数

我为此问题创建示例请检查

https://jsfiddle.net/solanki/hku6r7g2/

注意： HTML页面包含高图图表

Answer 1

看起来它适用于html2canvas的beta版本（0.5.0-beta4）。

 $('#convert').bind('click', function() { html2canvas($("#main-container"), { onrendered: function(canvas) { var imgsrc = canvas.toDataURL("image/png"); $('').appendTo('#main-container'); } }); }); 

例：
http://jsfiddle.net/g1c8Lyfn/

Answer 2

.toDataURL()只能在元素上调用; 它不能用于任意HTML。

 console.log("Canvas:"); var theCanvas = document.getElementById('theCanvas'); var a = theCanvas.toDataURL("image/png"); console.log(a); // this will work console.log("Div:"); var theDiv = document.getElementById('theDiv'); // this will throw the "not a function" error: var b = theDiv.toDataURL("image/png"); 

Answer 3

据我分析这个问题，我发现这涉及到将SVG转换为PNG（SVG – > Canvas – > PNG）。 对于这种情况，html2canvas可能无法正常工作。

为什么html2canvas不适合这种情况：

由于Highcharts使用SVG来渲染图形和图表，因此需要将svg转换为canvas而不是HTML。 html2canvas是一个非常好的html到canvas转换器，但似乎它不是为了转换svg而设计的，或者可能会出现故障 。

在搜索谷歌时，我遇到了一个名为Canvg的东西，我认为它可以帮到你。 所以我用它编码并且它解决了。 下面我附上了您可以使用的代码片段，如果您愿意：

            
 
  GENERATE IMAGE  
 
  
    

但是，是的，我仍然在尝试使用最新版本的html2canvas，其中包含一个额外的html2canvas.svg.js但无法弄清楚如何使用它，因为创建者已经从头开始新编写了库。 他还指定添加了SVG渲染支持。 在阅读代码时，我认为他已经使用FabricJS进行canvas支持。

由于它是新的，我们不能指望代码示例，因为它仍处于开发阶段。