SVG 未显示 - jsPlumb 和 html2canvas

Question

我正在使用 jsPlumb 来显示图表。一切工作正常，当我尝试使用 html2canvas (1.0.0-rc.5) 时出现问题，SVG 不会显示在图像中。这是我正在使用的代码：

绘制连接器的函数：

adjustLine (from, to) {
  jsplumb.jsPlumb.ready(function() {
    var instance = jsplumb.jsPlumb.getInstance();
    instance.importDefaults({
        Connector: ["Flowchart", {
            "stub": 25, 
            "cornerRadius": 5,
        }, {
          "cssClass": "my-connector"
        }],
        paintStyle: {
          strokeStyle: "#000000", 
          lineWidth: 2
        },
        Anchors: ["TopCenter", "BottomCenter"]
    });

    instance.connect({
        source: from,
        target: to,
        endpoint:"Blank"
    });
  });
}

使用html2canvas的功能：

generatePDF () {
  var myDiv = document.getElementById('content');

  var HTML_Width = myDiv.offsetWidth;
  var HTML_Height = myDiv.offsetHeight;

  html2canvas(myDiv, {useCORS: true, allowTaint : true}).then(function (canvas) {
    var imgData = canvas.toDataURL("image/png", 1.0);

    var pdf = new jsPDF('l', 'pt', [HTML_Width, HTML_Height]);
    pdf.internal.scaleFactor = 30;
    pdf.addImage(imgData, 'PNG', 0, 0, HTML_Width, HTML_Height);

    pdf.save("my_file.pdf");
  });
}

有人知道为什么会这样吗？任何帮助是极大的赞赏！

Answer 1

我们认为这是 html2canvas 中的一个错误。我们在这里发布了一篇有关修补版本以及如何将其与 Toolkit 版本一起使用的文章：

https://jsplumbtoolkit.com/blog/2024/05/17/jsplumb-and-html2canvas

它也适用于社区版。这不是 JsPlumb 特定的问题。问题是绝对定位的 SVG 元素导致 html2canvas 出错。