使用HTML2CANVAS将莫里斯图表保存为图像 [英] Saving Morris charts to image using HTML2CANVAS

问题描述

我有一个div，其中有morris和Flot图表，我正在使用html2canvas将div保存在Image中，该html2canvas仅保存Flot图表，而morris图表的空间在图像中为空白.Javascript代码-

I have a div in which i have morris and Flot charts I am saving the div in Image using html2canvas which saves only Flot charts and the morris charts space is left blank in the image. Javascript code -

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

请提出如何在同一张图片中保存莫里斯图表的信息.预先感谢

Please suggest how can i save the morris charts in the same image.. Thanks in advance

推荐答案

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

Flot charts are drawn using canvas, hence can be converted to image using html2canvas. Morris charts are drawn using SVG and not canvas.One of the ways by which you can export Morris charts, is first convert SVG to canvas using one of the below,

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

http://fabricjs.com/

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

And then export the converted canvas to image using html2canvas.

这篇关于使用HTML2CANVAS将莫里斯图表保存为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！