Search code examples
svgjsplumbhtml2canvas

html2canvas does not print jsPlumb Connectors

How to print SVG elements that are built by jsPlumb.

Known that getting all SVG Elements drawen by jsPlumb is retrieved by this code :

var uiJsPlumbConnectors=jsPlumb.getAllConnections().map(function(conn){return conn.canvas;})

All connectors are SVG elements :

Using html2canvas to print all connectors (SVG), it does not work :

html2canvas(uiJsPlumbConnectors).then(function(c){

     window.open(c.toDataURL('image/png'))

});

An image has been generated , however, it is an emply image .

FIDDLE

It seems that html2canvas does not support yet multi-elements drawing ?

Solution

  • Last time I checked html2canvas was not able to convert SVGs, you will need another script to handle that.

    The steps:

    • transfer html elements to canvas
    • transfer svg elements to canvas
    • export canvas

    I used https://code.google.com/p/canvg/ to export to the same canvas after using html2canvas. Hope that helps you.