1

I'm working on a web based graph application which connects different nodes via lines. To do so the connection lines are created by the library Leader-Lines. These connections are svg elements, which consist out of different elements as masks, markers, rectangles, etc. (they consist out of many lines of code so I outsourced the code into this JSFiddle)

In case the user finishes the graph he should be able to export the graph as an image. My plan was to create any image format from the html elements of the graph and then pass the image as a base64 string to the back-end to process it further.

I tried the following libraries to achieve this:

html2canvas

domvas

dom-to-image

rasterizeHTML

For html2canvas this is how I used the library:

html2canvas(document.querySelector("#myGraphContainerDiv"),
{ allowTaint: true }).then(canvas => {
               var graphAsbase64 = canvas.toDataURL("image/png");
               //Some ajax call to send the string to the backend
});

The problem: None of them was able to convert the svg connection.

My next step was to try to convert the SVG to a canvasand then try to convert the graph. This method was suggested in many SO posts. For this I used the library canvg but this didn't work either. For this I used the code from this answer.

Another problem I faced with this method was that with a big number of connections the process took longer and longer (over 1 minute with 8 connections).

The question: Is there a way to achieve the conversion of these connections or is this simply not possible at the moment?

T. Jung
  • 3,327
  • 3
  • 11
  • 19
  • interesting problem... I got it to draw to the canvas here: http://mtcanvas.com/n/stack/svg-to-canv.html by making sure both svg objects had the same namespace... but unfortunately foreignObject taints the canvas - so saving works in firefox, but not in chrome... you'll likely have to do something serverside maybe using phantomjs – Zevan Sep 07 '19 at 22:04
  • Yes this is another option I looked into. Then I would have to extend the application so the current graph can be reopened by phantomjs to take screenshots. One thing I figured our while trying to solve the problem was if I delete `` this mask element the svg gets rendered correctly. But I wasn't able to to something useful with this finding as the mask elements differ depending on the direction of lines. – T. Jung Sep 08 '19 at 13:14
  • may be it helps https://stackoverflow.com/questions/55534944/how-to-make-screenshot-for-block-with-svg-elements-on-the-site – Stranger in the Q Sep 09 '19 at 12:48
  • @StrangerintheQ unfortunately not. – T. Jung Sep 11 '19 at 18:42
  • @Zevan could u provide some example code how you managed to do this? If it only works in firefox it won't be a problem. I would be happy if I get it running i any browser. – T. Jung Sep 11 '19 at 18:43
  • 1
    if you view the source of: http://mtcanvas.com/n/stack/svg-to-canv.html you can see what I did @T.Jung - and confirmed that it does save in the latest firefox – Zevan Sep 12 '19 at 19:04

0 Answers0