Question

我试图将高图转换为画布，以便我可以将其设置为img src。

这是我的代码

Javascript：

html2canvas([document.getElementById('container')], {
    onrendered: function (canvas) {
        document.getElementById('canvas').appendChild(canvas);
        var data = canvas.toDataURL('image/png');
        var image = new Image();
        image.src = data;
        document.getElementById('image').appendChild(image);
    }
});

HTML：

<div id="canvas">
    <p>Canvas :</p>
</div>
<div id="image">
    <p>Image :</p>
</div>

我无法将高清图数据作为画布获取，请帮我解决此问题

Answer 1

导出部分

导出易于处理使用canvg库（由highcharts示例和其他SO问题提供，如评论canvg and highcharts how to include chart legend and keep the chart size?中提供的那些）。

假设您的html中已经有canvas项：

引用的脚本：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>

Javascript函数：

function exportChart() {
    var svg = canvg(document.getElementById('canvas'), getSVG(), {
        //ignoreDimensions: true
    });
}

function getSVG() {
    var chart = $('#container').highcharts();
    var svg = chart.getSVG();
    return svg;
}

通过按钮调用此函数：http://jsfiddle.net/c2Dp2/231/

脚本执行

主要问题是：我们应该如何/何时/何时执行此操作以使其正常工作？

事实上，当执行所有动画时，似乎没有触发任何complete事件。我尝试了以下方法：

使用Load事件（请参阅Highcharts documentation）：脚本正在循环播放，尽管该事件应该在以下情况下触发：

图表加载完毕后触发

在animation complete中使用plotOptions.series：此事件会多次触发==＆gt;不能用于此目的
使用highchart函数的回调：脚本也在这里循环，即使回调只被称为一个。

这个ready事件问题已在highcharts论坛中提出过，例如：http://forum.highcharts.com/viewtopic.php?f=9&t=10078但我无法找到使用它们提供的示例的方法。

修改

感谢PawełFus（见这个答案的评论）：导出功能创建了另一个图表，解释了为什么它在我们之前的情况下循环。

当我们调用导出函数时，标志chart.userOptions.chart.forExport被设置为true，所以我们只需要在回调中过滤以避免循环。

更新小提琴：jsfiddle.net/c2Dp2/232

高图到图像

1 个答案:

导出部分

脚本执行