时间戳

首页 > 解决方案 > canvg 不能将类作为函数调用

javascript - canvg 不能将类作为函数调用

问题描述

对于我正在处理的项目，我需要将 svg 转换为 png 文件。为此，我在网上找到了多个指南和解释。可在此处找到其中之一：将D3 图表导出为 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 文档表格，并没有发现任何关于这种类型的表示法或替代方法的信息。

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

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

标签： javascriptsvgcanvg

解决方案

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

另外，您参考了GitHub 文档，其中清楚地写了如何使用它：

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

};

您阅读的将D3 图表导出为 PDF的文章可能指的是较旧的 APICanvg

这应该这样做：

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

推荐阅读