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

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

这是HTML

This is a screenshot

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

this is a screenshot 当我使用下面的代码，我得到一个错误：

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

的错误是：

error canvas.toDataURL is not a function

对于此问题，创建例如请

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

注意： HTML页面包含一个加大图表

来源

2017-07-24 Solanki ram

你检查什么的'VAR帆布=的document.getElementById（ 'sharedOne'）后'canvas'值;'？ –

您的#sharedOne div不存在或不是HTML canvas元素。 –

@henriqueromao是的，我检查画布价值。它仅返回html –

它看起来像它与html2canvas的测试版（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/

来源

2017-08-01 17:00:51

谢谢你。它工作正常，但图像已被拉伸。 –

它的工作铬，但不工作在Firefox。 –

.toDataURL()只能在<canvas>元素上调用;它不能用于任何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");

<div id="theDiv"></div> 
 

 
<canvas id="theCanvas"></canvas>

的html2canvas插件，您第一次使用创建一个基于原始的HTML，所以你可以使用它.toDataURL()一个<canvas>元素 - ，但它不支持SVG，这就是为什么图表在输出中不可见。

其他一些技术转换到HTML的图像都可以在此找到（老了，但我没有看到任何最近在第一次看）问题：Render HTML to an image

同时，SVG转换为图像，看到Convert SVG to image (JPEG, PNG, etc.) in the browser

您可以来链接这些技术顺序：首先你的SVG转换成JPEG或PNG，然后将其转换包含图像的HTML成<canvas>，然后使用.toDataURL上是 ...

来源

2017-07-24 14:46:16

我觉得这是工作没有画布，请检查此链接 https://jsfiddle.net/solanki/hku6r7g2/ 我有同样的问题 –

@Solankiram在小提琴的代码使用html2canvas到HTML转换为'在调用'.toDataURL（）'之前调用''元素。（请注意'console.log（“canvas”，canvas）'行的输出。）这与我链接的旧问题中接受的答案中使用的技术相同。 –

@Solankiram对不起，我一开始并没有意识到这里有两个不同的问题，我只回答其中的一个。我已经更新了答案 –

据我分析这个问题，我才知道这涉及到SVG到PNG的转换（SVG - > Canvas - > PNG）。对于这种情况，html2canvas可能无法正常工作。

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

由于Highcharts利用SVG的渲染图形和图表，它需要SVG转换为画布，而不是HTML。 html2canvas是一个非常好的HTML到canvas转换器，但它似乎是not designed to convert svg's或may render faulty。

在搜索Google时，我遇到了一些我认为可能会帮助您的Canvg。所以我编码使用它，它解决了。下面，我附，你可以使用的代码片段，如果你想：

<html> 
<head></head> 
<body> 
<script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

<!-- 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.svg.js"></script> 
--> 

<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script> 
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script> 
<div id="sharedOne"> 
    <div id="container"></div> 
    <button class="clickGrn"> 
     GENERATE IMAGE 
    </button> 
</div> 
<div id="img"> 
    <img id="newimg"> 
</div> 

<script> 
     Highcharts.chart('container', { 

     title: { 
      text: 'Solar Employment Growth by Sector, 2010-2016' 
     }, 

     subtitle: { 
      text: 'Source: thesolarfoundation.com' 
     }, 

     yAxis: { 
      title: { 
       text: 'Number of Employees' 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle' 
     }, 

     plotOptions: { 
      series: { 
       pointStart: 2010 
      } 
     }, 

     series: [{ 
       name: 'Installation', 
       data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] 
      }, { 
       name: 'Manufacturing', 
       data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] 
      }, { 
       name: 'Sales & Distribution', 
       data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] 
      }, { 
       name: 'Project Development', 
       data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] 
      }, { 
       name: 'Other', 
       data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] 
      }] 

    }); 

    /* 
    YOU SHALL REPLACE THE FOLLOWING CODE WITH THE CODE PROVIDED BELOW 
    ================================================================= 
    $("body").on("click", ".clickGrn", function() { 
     alert("Calll"); 
     html2canvas($("#sharedOne"), { 
     allowTaint: true, 
       onrendered: function (canvas) { 
        canvg('canvas', canvas); 
        var imgsrc = canvas.toDataURL("image/jpg"); 
        console.log(imgsrc); 
        $("#newimg").attr('src', imgsrc); 
       } 
      }); 
     }); 
    */ 

$("body").on("click", ".clickGrn", function() { 

    var canvasSharedOne = document.createElement("canvas"); 
    var HighChartsSVG=$('#container').find('svg')[0].outerHTML; 
    canvg(canvasSharedOne, HighChartsSVG); 
    var imgsrc = canvasSharedOne.toDataURL(); 
    document.getElementById('newimg').src = imgsrc; 

    }); 

</script> 
</body> 
</html>

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

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

来源

2017-07-25 12:19:13 thecodingpanda

它正在工作，但这个只生成SVG图像，而不是HTML。我需要（HTML和图形）。 –

将html与highcharts图转换为使用html2canvas的图像

回答

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

相关问题