使用 node-canvas 和 jsdom 重复调用资源

Question

当使用 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);

Answer 1

我认为它与加载图像“之后”的图像大小调整有关。也许是因为“重绘”，或者如此。 （浏览器 canvas 这样做，如果我没记错的话）。我刚刚测试了这个理论，所以如果你像这样重新排序一些行

...
testimg.width = 0;
testimg.height = 0;
testimg.src = "http://localhost:8080/Fiestas.png"; // example img
src_img.appendChild(testimg);
...

图像应该只加载一次。我刚刚试过了，它起作用了，但我还没有文档或代码证明。将更新答案 if/when 我找到了这个（有效的）理论的证明。

使用 node-canvas 和 jsdom 重复调用资源

Duplicated calls for resource with node-canvas and jsdom

javascript

jsdom

node-canvas