使用 HTML2CANVAS 将 Morris 图表保存为图像

【问题标题】：Saving Morris charts to image using HTML2CANVAS使用 HTML2CANVAS 将 Morris 图表保存为图像
【发布时间】：2015-02-23 21:15:26
【问题描述】：

我有一个 div，其中有 morris 和 Flot 图表我正在使用 html2canvas 将 div 保存在 Image 中，它只保存 Flot 图表，而 morris 图表空间在图像中留空。 Javascript 代码 -

$('#DIV1').html2canvas({
             onrendered: function (canvas) {
                 $('#img_val').val(canvas.toDataURL("image/png"));                    
             }
         });

请建议我如何将莫里斯图表保存在同一图像中.. 提前致谢

【问题讨论】：

标签： javascript html2canvas morris.js

【解决方案1】：

Flot 图表使用画布绘制，因此可以使用 html2canvas 转换为图像。莫里斯图表是使用 SVG 而不是画布绘制的。导出莫里斯图表的方法之一是首先使用以下方法之一将 SVG 转换为画布，

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

http://fabricjs.com/

然后使用 html2canvas 将转换后的画布导出为图像。

【讨论】：