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

Question

我有一个div，其中我有morris和Flot图表我使用html2canvas保存图像中的div，它仅保存Flot图表，并且图像中的morris图表空间保留为空白。             Javascript代码 -

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

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

Answer 1

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

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

http://fabricjs.com/

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