canvg 不能将类作为函数调用

如何解决canvg 不能将类作为函数调用

对于我正在处理的项目，我需要将 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 表单 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",1020,768);
      doc.save("svg-png-chart.pdf");
    }

解决方法

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

此外，您提到了 https://leetcode.com/problems/design-browser-history/，其中清楚地写了如何使用它：

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();

};

可能您阅读的文章 GitHub Documentation 指的是 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",1020,768);
      doc.save("svg-png-chart.pdf");
}

,

我找到了解决方案。修复也归功于 DDomen。他让我走上了正确的道路。 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,width,height);
      doc.save("svg-png-chart.pdf");
    }