canvg 不能将类作为函数调用答案

【问题标题】：canvg cannot call a class as a functioncanvg 不能将类作为函数调用
【发布时间】：2021-02-09 16:12:07
【问题描述】：

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

【问题讨论】：

标签： javascript svg canvg

【解决方案1】：

错误很明显，您调用的类 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");
}

【讨论】：

【解决方案2】：

我找到了解决方案。该修复也归功于 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, 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");
    }

【讨论】：