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

Question

我有一个 div，其中我有 morris 和 Flot 图表我正在使用 html2canvas 将 div 保存在图像中，它只保存 Flot 图表和莫里斯图表 space图像中的空白。 Javascript 代码 -

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

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

Answer 1

图表是使用 canvas 绘制的，因此可以使用 html2canvas 转换为图像。 Morris 图表是使用 SVG 而不是 canvas.One 导出 Morris 图表的方法，首先使用以下方法之一将 SVG 转换为 canvas，

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

http://fabricjs.com/

然后使用html2canvas将转换后的canvas导出为图片。

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

Saving Morris charts to image using HTML2CANVAS

javascript

html2canvas

morris.js