使用html2canvas将html与highcharts图转换为图像 [英] convert html with highcharts graph to image using html2canvas

问题描述

我想将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页面包含一个大图表

解决方案

它看起来可以与html2canvas的beta版本（0.5.0-beta4）一起使用。

  $（'＃convert'）。bind（'click'，function（）{
 html2canvas（$（＃main-container），{
 onrendered：function（canvas）{
 var imgsrc = canvas.toDataURL（image / png）; 
 $（'< img src =''+ imgsrc +'/>'） .appendTo（'＃main-container'）; 
} 
}）; 
}）; 
  

示例：

http://jsfiddle.net/g1c8Lyfn/

I want to convert an HTML page to an image, when I use the below code I get a result that doesn't quite match what I'd expect.

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

This is a screenshot of the HTML

and this is a screenshot for the results of running the code above.

When I use the code below I get an error:

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

The error is:

error canvas.toDataURL is not a function

I create example for this issue please check

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

Note: The HTML page contains a highchart graph

解决方案

It looks like it works with beta release (0.5.0-beta4) of html2canvas.

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

Example:
http://jsfiddle.net/g1c8Lyfn/

这篇关于使用html2canvas将html与highcharts图转换为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！