使用JavaScript

Question

我正在开发一个基于Web的图形应用程序，该应用程序通过线连接不同的节点。为此，连接线由库Leader-Lines创建。这些连接是svg元素，由与masks, markers, rectangles, etc.不同的元素组成（它们由许多行代码组成，因此我将代码外包到this JSFiddle中）

如果用户完成图形，则他应该能够将图形导出为图像。我的计划是从图形的html元素创建任何图像格式，然后将图像作为base64字符串传递给后端以进一步处理它。

我尝试了以下库来实现这一目标：

html2canvas

domvas

dom-to-image

rasterizeHTML

对于 html2canvas ，这是我使用库的方式：

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

问题：他们都无法转换svg连接。

我的下一步是尝试将SVG转换为canvas，然后尝试转换图形。许多SO职位都建议使用此方法。为此，我使用了库canvg，但这也不起作用。为此，我使用了this answer中的代码。

此方法面临的另一个问题是，随着连接数量的增加，该过程花费的时间越来越长（8个连接超过1分钟）。

问题：是否有一种方法可以实现这些连接的转换，或者目前根本无法实现？