canvg不能将类作为函数调用

Question

对于我正在处理的一个项目，我需要将svg转换为png文件。为了做到这一点，我在网上找到了多个指南和解释。其中之一可以在这里找到：Exporting D3 charts to PDF

为了将svg转换为png，他们使用以下代码：

let canvas = document.createElement('canvas');
canvg(canvas, svg);
let imgData = canvas.toDataURL('image/png');

但是当我尝试在我自己的项目"TypeError: Cannot call a class as a function"中实现它时，我总是得到一个错误。我在网上找到了他们使用canvg(canvas, svg);符号的多种解释。我还阅读了Github documentation form Canvg，但没有找到任何关于这种类型的符号或实现这一点的替代方法。

我将包导入到我的项目中的方法如下：

import canvg from "canvg";

这是我用来将我的d3 svg图表转换成pdf的完整代码：

    exportToPDF() {
      let svg = document.getElementsByClassName("svg")[0].innerHTML;
      var canvas = document.createElement("canvas");

      canvg(canvas, svg);
      let imgData = canvas.toDataURL("image/png");

      var doc = new jsPDF("l", "pt", [1020, 768]);
      doc.addImage(imgData, "PNG", 0, 0, 1020, 768);
      doc.save("svg-png-chart.pdf");
    }

Answer 1

我已经找到了解决方案。修复也要归功于DDomen。他让我走上了正确的道路。为了将svg转换为png，应该使用canvg.fromString(context, svg)。

但是下一个问题将会出现，即需要在画布上设置尺寸，以便在图像大于画布对象的默认尺寸时对其进行裁剪。

    exportToPDF() {
      let svgElement = document.getElementsByClassName("svg")[0];
      const width = svgElement.getBoundingClientRect().width;
      const height = svgElement.getBoundingClientRect().height;
      let svg = svgElement.innerHTML;
      let canvas = document.createElement("canvas");
      let context = canvas.getContext("2d");
      canvas.width = width;
      canvas.height = height;

      let v = canvg.fromString(context, svg);
      v.start();

      let imgData = canvas.toDataURL("image/png");

      var doc = new jsPDF("l", "pt", [1020, 768]);
      doc.addImage(imgData, "PNG", 0, 0, width, height);
      doc.save("svg-png-chart.pdf");
    }

Answer 2

错误很明显，您正在调用没有new关键字的类canvg。

此外，您还提到了GitHub Documentation，其中清楚地说明了如何使用它：

window.onload = () => {

    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    
    // ==== HERE YOUR FUNCTION ===
    v = canvg.Canvg.fromString(ctx, '<svg width="600" height="600"><text x="50" y="50">Hello World!</text></svg>');

    // Start SVG rendering with animations and mouse handling.
    v.start();

};

可能您读到的Exporting D3 charts to PDF文章引用的是Canvg的一个较旧的API。

这应该可以做到：

exportToPDF() {
      let svg = document.getElementsByClassName("svg")[0].innerHTML;
      let canvas = document.createElement("canvas");
      let context = canvas.getContext('2d')

      let v = canvg.Canvg.fromString(context, svg);
      v.start();

      let imgData = canvas.toDataURL("image/png");

      var doc = new jsPDF("l", "pt", [1020, 768]);
      doc.addImage(imgData, "PNG", 0, 0, 1020, 768);
      doc.save("svg-png-chart.pdf");
}