javascriptjsdomnode-canvas

Duplicated calls for resource with node-canvas and jsdom

I'm getting duplicated calls for a resource when it's added through a script as an image using jsdom and node-canvas.

I believe there's some kind of interaction between jsdom and canvas that performs the call to that endpoint twice, I don't know if someone can help me to configure this properly but I need only one call.

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);
Solution

  • I asume it has to do with the resizing of the image, "after" it has be loaded. Maybe because of a "redraw", or so. (the browser canvas does this, if I remember correct). I just tested this theory, so if you reorder some lines like this

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

    the image should be loaded only once. I just tried it, and it worked, but I don't have documentation or Code prove, yet. Will Update the answer if/when I find the prove to this (working)-theory.