Question

我有一个SVG图形，我想将其转换为PNG，然后将其作为下载提供。如果我选择SVG并使用jQuery创建canvas元素，我会不断在标题中得到错误。如果我使用基本的javascript函数，例如createElement和getElementById，它似乎有用。

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

这是我的代码：

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

canvas.width  = svg.width;
canvas.height = svg.height;

canvg(canvas, svgString);

Answer 1

您无法将jQuery对象传递给canvg，您必须传递一个元素。

~~在我看来，如果你确实传递了一个容器，那么canvg会自行检查，因此它必须检索canvas元素。~~
_{实际上他们甚至不这样做......我不知道他们在看什么孩子的节点，但是他们知道。（如果你传递了另一个HTMLElement，它会抛出<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Happybone</title>
<style>

</style>
</head>
<body>
<ul>
<li>
<img src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg"/>
</li>
<li> <a href="https://happybone.se" class="top"> Start </a></li>
<li> <a href="https://giftigt.happybone.se" class="top"> Giftigt </a> </li>
<li> <a href="https://forum.happybone.se" class="top"> Forum </a></li>
<li> <a href="https://kontakt.forum.se" class="bot"> Kontakt </a></li>
</ul>
<section class="box">
<div id="info">
<h3>Välkommen till happybone!</h3>
<br>
<p>Här på happybone vill vi underlätta för alla hundägare, nya som gamla.</p>
<p>Vi erbjuder ett flertal roliga och lättnavigerade sidor. Vi har ett forum där du har möjlighet att diskutera med oss på happybone eller andra passionerade hundägare. Eller varför inte ordna upp en hundträff i en av Sveriges hundratals hundparker?</p>
<p>Du navigerar i panelen till vänster om denna text.</p>
<p>Där hittar du flikarna Start, Giftigt, Forum och Kontakt</p>
<p>Klicka på en utav flikarna för mer information.</p>
<p>Vi vill att du ska trivas här på happybone, hör därför gärna av dig till oss på info@happybone.se om det är något du undrar över.</p>
<br>
<br>
<p id="sidenote">Sidan är under konstruktion, tack för ditt tålamod.</p>
</div>
<table>
<tr><td><h1>Veckans Bilder</h1></td></tr>
<tr>
<td>
<img src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg"/></td>
</tr>
<tr>

<td><img id="under" src="https://scontent.cdninstagram.com/hphotos-xft1/t51.2885-15/s640x640/sh0.08/e35/11420815_1616482671902240_1477475889_n.jpg"/></td>

</tr>
</table>
</section>
</body>
</html>错误......）}

与任何其他HTML元素一样，CanvasElement确实实现了target.getContext is not a function属性，因此它们肯定会检查childNodes，如果真的检查~~，请检查列表中的canvas元素，否则使用画布。~~这一次通话，如果他们不检查target.childNodes.length，就会抛出你得到的错误。

因此，您可以轻松修复(target.childNodes && target.childNodes.length)。

使用Canvg将svg转换为png：＆＃34; target.childnodes未定义＆＃34;错误

1 个答案: