Javascript canvg不能将类作为函数调用

对于我正在进行的项目，我需要将svg转换为png文件。为了做到这一点，我在网上找到了多个指南和解释。其中一个可以在此处找到：

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

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

但是，当我在自己的项目中尝试实现时，我不断遇到一个错误：

“TypeError:无法将类作为函数调用”

。我在网上找到了多种解释，其中他们使用了

canvg（canvas，svg）符号。我也读过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");
    }

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

此外，您还提到了有明确说明如何使用它的地方：

window.onload=（）=>{
const canvas=document.querySelector（'canvas'）；
const ctx=canvas.getContext（'2d'）；
//==这是您的函数===
v=canvg.canvg.fromString（ctx，'helloworld！'）；
//使用动画和鼠标操作启动SVG渲染。
v、 start（）；
};

您阅读的文章可能是指
Canvg

这应该做到：

exportToPDF（）{
让svg=document.getElementsByCassName（“svg”）[0].innerHTML；
让canvas=document.createElement（“canvas”）；
let context=canvas.getContext（'2d'）
设v=canvg.canvg.fromString（上下文，svg）；
v、 start（）；
让imgData=canvas.toDataURL（“image/png”）；
var doc=新的jsPDF（“l”、“pt”[1020768]）；
addImage文件（imgData，“巴布亚新几内亚”，0、0、1020、768）；
doc.save（“svg png chart.pdf”）；
}
错误很明显，您正在调用类
canvg
，但没有
new
关键字

此外，您还提到了有明确说明如何使用它的地方：

window.onload=（）=>{
const canvas=document.querySelector（'canvas'）；
const ctx=canvas.getContext（'2d'）；
//==这是您的函数===
v=canvg.canvg.fromString（ctx，'helloworld！'）；
//使用动画和鼠标操作启动SVG渲染。
v、 start（）；
};

您阅读的文章可能是指
Canvg

这应该做到：

exportToPDF（）{
让svg=document.getElementsByCassName（“svg”）[0].innerHTML；
让canvas=document.createElement（“canvas”）；
let context=canvas.getContext（'2d'）
设v=canvg.canvg.fromString（上下文，svg）；
v、 start（）；
让imgData=canvas.toDataURL（“image/png”）；
var doc=新的jsPDF（“l”、“pt”[1020768]）；
addImage文件（imgData，“巴布亚新几内亚”，0、0、1020、768）；
doc.save（“svg png chart.pdf”）；
}
我找到了解决方案。修复也要感谢DDomen。他让我走上了正确的道路<应该使用code>canvg.fromString（context，svg）

将svg转换为png

但接下来的问题是，当图像大于画布对象的默认尺寸时，需要在画布上设置尺寸，以便裁剪图像

    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");
    }

---

我找到了解决办法。修复也要感谢DDomen。他让我走上了正确的道路<应该使用code>canvg.fromString（context，svg）将svg转换为png

但接下来的问题是，当图像大于画布对象的默认尺寸时，需要在画布上设置尺寸，以便裁剪图像

    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");
    }