1

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);
soni
  • 687
  • 1
  • 8
  • 23
  • I have two questions, that probably doesn't have to do anything with the problem. 1) `image` is not defined, did you mean to write `testimg`. and 2) I don't see any import for `node-canvas`, so I wonder if it is part of the problem, or the posted code-snipplet is to small. – winner_joiner Sep 22 '21 at 10:27
  • About the testimg, yes! it was a typo here, but it's fixed now. About the second part, in jsdom docs you can read `If jsdom can find the canvas package, it will use it, but if it's not present, then elements will behave like
    s.` actually if I remove the dependency there're no calls at all, so to me, this part works fine.
     – soni Sep 22 '21 at 10:34

1 Answers1

0

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.

Dharman
  • 30,962
  • 25
  • 85
  • 135
winner_joiner
  • 12,173
  • 4
  • 36
  • 61
  • Very interesting theory. I'll have a look today as well and let you know if it works. Thanks! – soni Sep 23 '21 at 07:04
  • Hi @winner_joiner well, you were right, that's the reason, I just tested it and now it works as expected. Thanks! – soni Sep 23 '21 at 08:55