使用 node-canvas 和 jsdom 重复调用资源
Posted
技术标签:
【中文标题】使用 node-canvas 和 jsdom 重复调用资源【英文标题】：Duplicated calls for resource with node-canvas and jsdom 【发布时间】：2021-11-15 19:07:36 【问题描述】：当资源通过脚本添加为使用 jsdom 和 node-canvas 的图像时，我收到重复调用。
我相信 jsdom 和 canvas 之间存在某种交互，会执行两次对该端点的调用，我不知道是否有人可以帮助我正确配置它，但我只需要一次调用。
const jsdom = require('jsdom');
const JSDOM = jsdom;
const options =
runScripts: "dangerously",
url: `https://localhost:8800`,
resources: "usable"
;
new JSDOM(`
<html>
<head><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head>
<body>
<div id="my_img"></div>
<script>
var src_img = document.getElementById("my_img");
var testimg = document.createElement("img");
testimg.src = "https://revistahsm.com/wp-content/uploads/2018/08/Fiestas.png"; // example img
testimg.width = 0;
testimg.height = 0;
src_img.appendChild(testimg);
</script>
</body>
</html>
`, options);
【问题讨论】：
我有两个问题，可能与问题无关。 1)image 没有定义，你的意思是写testimg。 2）我没有看到node-canvas 的任何导入，所以我想知道这是否是问题的一部分，或者发布的代码片段太小。
关于测试，是的！这是一个错字，但现在已修复。关于第二部分，在 jsdom 文档中，您实际上可以阅读 If jsdom can find the canvas package, it will use it, but if it's not present, then <canvas> elements will behave like <div>s.，如果我删除依赖项，则根本没有调用，所以对我来说，这部分工作正常。
【参考方案1】：
我认为它与图像的大小调整有关，“在”它被加载之后。也许是因为“重绘”，或者如此。 （如果我没记错的话，浏览器画布会这样做）。 我刚刚测试了这个理论，所以如果你像这样重新排序一些行
...
testimg.width = 0;
testimg.height = 0;
testimg.src = "http://localhost:8080/Fiestas.png"; // example img
src_img.appendChild(testimg);
...
图像应该只加载一次。我刚刚尝试过，它确实有效，但我还没有文档或代码证明。如果/当我找到这个（工作）理论的证明时，将更新答案。
【讨论】：
非常有趣的理论。我今天也会看看，让你知道它是否有效。谢谢！ 嗨@winner_joiner 好吧，你是对的，这就是原因，我刚刚测试了它，现在它可以按预期工作。谢谢！以上是关于使用 node-canvas 和 jsdom 重复调用资源的主要内容，如果未能解决你的问题，请参考以下文章
更新node.js和Electron后，node-canvas失败
node-canvas 中的 registerFont() 未解析 Firebase Cloud Functions 上的字体
记录在Windows下安装node-canvas遇到的各种问题（无法安装canvas，安装canvas包报错error...）