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

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

javascript jquery html angularjs

Javascript 使用html2canvas将带有highcharts图形的html转换为图像,javascript,jquery,html,angularjs,html2canvas,Javascript,Jquery,Html,Angularjs,Html2canvas,我想将一个HTML页面转换成一个图像，当我使用下面的代码时，我得到的结果与我期望的不太匹配 html2canvas($("#sharedOne"), { onrendered: function (canvas) { console.log("canvas",canvas) var imgsrc = canvas.toDataURL("image/png"); console.log(imgs

我想将一个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不是函数

我为这个问题创建了一个示例，请检查

注意：HTML页面包含一个highchart图

。toDataURL（）

只能在

元素上调用；它不能用于任意HTML

console.log（“Canvas:”）；
var theCanvas=document.getElementById（'theCanvas'）；
var a=canvas.todata URL（“图像/png”）；
console.log（a）；//这会奏效的
控制台日志（“Div:”）；
var theDiv=document.getElementById（'theDiv'）；
//这将抛出“非函数”错误：
var b=第四个toDataURL（“图像/png”）
在分析这个问题时，我了解到这涉及到SVG到PNG的转换（SVG->Canvas->PNG）。在这种情况下，html2canvas可能无法正常工作
为什么html2canvas不适合这种情况：
由于Highcharts使用SVG来呈现图形和图表，因此需要将SVG转换为画布而不是HTML。html2canvas是一个非常好的html-to-canvas转换器，但它似乎是或
在搜索谷歌时，我遇到了一个叫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，它包含一个额外的html2canvas.svg.js
，但由于创建者从头开始编写库，所以无法理解如何使用它。他还指定添加SVG呈现支持。在阅读代码时，我认为他使用了FabricJS作为画布支持
由于它是新的，我们不能期望代码示例，因为它仍处于开发阶段。
它似乎与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');
    }
  });
});

$（'#convert'）.bind（'click'，function（）{
html2canvas（$（“#主容器”）{
onrendered：函数（画布）{
var imgsrc=canvas.toDataURL（“image/png”）；
$（“”）.appendTo（“#主容器”）；
}
});
});

示例：

您是否检查了canvasvar canvas=document.getElementById（'sharedOne'）之后的canvas
值？您的#sharedOne div不存在或不是html画布元素。@henriqueromao是，我检查画布值。这是唯一的回报html@SebastianKrysiakdiv存在（我使用angularjs，此代码在单击时执行）。我认为它在没有画布的情况下工作。请检查此链接，我有相同的链接issue@Solankiram该小提琴中的代码使用html2canvas将HTML转换为
元素，然后再对其调用.toDataURL（）
。（注意console.log（“canvas”，canvas）
行的输出。）这与我链接到的旧问题中接受的答案中使用的技巧相同。@Solankiram抱歉，我起初没有意识到这里有（某种程度上）两个不同的问题，我只回答了其中一个。我已经更新了answer@deniel请查看下面的链接。我在js fiddleYes上创建了一个例子，这和我们之前讨论的是同一把小提琴。它不起作用，因为html2canvas不能转换svg。它起作用了，但这个只生成svg到图像，而不是HTML。我需要两者（HTML和图形）。Thanx人。它工作正常，但图像被拉伸了。