canvas不能作为函数调用类

Question

对于我正在工作的一个项目，我需要将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);符号。我也阅读了Github文档form 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");
}

Answer 1

错误清除，您调用的是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是指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。

但是下一个问题就出现了，尺寸需要在画布上设置，以便在图像大于画布对象的默认尺寸时进行裁剪。

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