使用Canvg将svg转换为png:"target.childnodes未定义“;错误

Convert svg to png using Canvg: "target.childnodes is undefined" error

本文关键字：target quot childnodes 未定义 错误 Canvg svg 转换 png 使用      更新时间：2023-09-26

我有一个SVG图形，我想将其转换为PNG，然后作为下载提供。如果我选择SVG并使用jQuery创建画布元素，我会经常在标题中得到错误。如果我使用像createElement和getElementById这样的基本javascript函数，它似乎可以正常工作。

那么这个错误是什么意思呢？如果我看一下canvg源代码，target似乎是canvg方法中的canvas（请参阅下面的代码）。但它当然没有任何孩子，我没有附加任何其他内容

这是我的代码：

var svg = $('#chart')[0],
canvas = $("canvas"),
serializer = new XMLSerializer(),
svgString = serializer.serializeToString(svg);
canvas.width  = svg.width;
canvas.height = svg.height;
canvg(canvas, svgString);

不能将jQuery对象传递给canvg，必须传递一个元素。

在我看来，如果您确实传递了一个容器，那么canvg确实会检查自己，因此它必须检索画布元素
实际上他们甚至不这么做。。。我不知道他们在调查childNodes，但他们确实在调查。（如果你传递另一个HTMLElement，它会抛出target.getContext is not a function错误…）

与任何其他HTML元素一样，CanvasElement确实实现了childNodes属性，因此它们肯定会检查target.childNodes.length，如果是true，则在列表中检查画布元素，否则使用画布 如果他们不检查(target.childNodes && target.childNodes.length)，这一次调用将抛出您得到的错误。

因此，对您来说，简单的解决方法就是设置canvas = $("canvas")[0]。

相关文章：