canvg 无法将 class 作为函数调用

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); 符号的多种解释。我还阅读了 Canvg 的 Github documentation 表格，没有发现任何关于这种类型的符号或替代方法的信息。

我将包导入项目的方式如下：

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

错误很明显，您在调用 class canvg 时没有使用 new 关键字。

另外，你提到的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");
}

Answer 2

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

但是下一个问题会出现，需要在 canvas 上设置尺寸，以便在图像大于 canvas 对象的默认尺寸时裁剪图像.

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

canvg 无法将 class 作为函数调用

canvg cannot call a class as a function

javascript

svg

canvg