【问题标题】：convert html with highcharts graph to image using html2canvas使用 html2canvas 将带有 highcharts 图形的 html 转换为图像
【发布时间】：2017-12-30 02:05:33
【问题描述】：

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

【问题讨论】：

您检查过canvas 之后的var canvas = document.getElementById('sharedOne'); 值吗？
您的#sharedOne div 不存在或者不是 html 画布元素。
@henriqueromao 是的，我检查了画布值。它只返回 html
@SebastianKrysiak div 存在（我正在使用 angularjs，此代码在点击时执行）。

标签： javascript jquery html angularjs html2canvas

【解决方案1】：

看起来它适用于 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/

【讨论】：

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

【解决方案2】：

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

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

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

在 Google 搜索时，我发现了一个名为 Canvg 的东西，我认为它可能会对您有所帮助。所以我已经使用它进行了编码并且它成功了。下面我附上了代码 sn-p，如果您愿意，可以使用：

    <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，其中包含一个额外的 html2canvas.svg.js，但由于创建者从头开始新编写了库，所以无法弄清楚如何使用它。他还指定添加了 SVG 渲染支持。在阅读代码时，我认为他使用 FabricJS 来支持画布。

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

【讨论】：

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

【解决方案3】：

.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 创建了一个 <canvas> 元素，因此您可以在其上使用 .toDataURL() - 但它不支持 SVG，这就是为什么您的图表在输出。

其他一些将 HTML 转换为图像的技术可以在这个（旧的，但乍一看我看不到任何更新的）问题中找到：Render HTML to an image

同时，关于将 SVG 转换为图像，请参阅 Convert SVG to image (JPEG, PNG, etc.) in the browser

您可以按顺序链接这些技术：首先将您的 SVG 转换为 jpeg 或 png，然后将包含图像的 HTML 转换为 <canvas>，然后在那个上使用.toDataURL >...

【讨论】：

我认为它在没有画布的情况下也可以工作，请检查此链接jsfiddle.net/solanki/hku6r7g2我有同样的问题
@Solankiram 该小提琴中的代码使用 html2canvas 将 HTML 转换为 <canvas> 元素，然后再调用 .toDataURL()。（注意console.log("canvas", canvas) 行的输出。）这与我链接到的旧问题中接受的答案中使用的技术相同。
@Solankiram 抱歉，起初我没有意识到这里有（有点）两个不同的问题，我只回答了其中一个。我已经更新了答案
@deniel 请查看以下链接。我在 js fiddle 上创建了一个示例
是的，这与我们之前讨论的小提琴相同。它不起作用，因为 html2canvas 无法转换 svg。