Saving Morris charts to image using HTML2CANVAS

问题

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

回答1:

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/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

http://fabricjs.com/

And then export the converted canvas to image using html2canvas.

来源：https://stackoverflow.com/questions/28647395/saving-morris-charts-to-image-using-html2canvas