toDataURL of jsdom + canvas on node different result

Question

I tried to test the code for drawing canvas with jsdom+canvas.

      const n = document.createElement('canvas');
      document.body.appendChild(n)
      n.width = 300, n.height = 300;
      t.moveTo(0, 0);
      t.lineTo(200, 100);
      t.stroke();
      return n.toDataURL()

And I got this result

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAABmJLR0QA/wD/AP+gvaeTAAACbklEQVR4nO3UoQ0CAQAEwfsOqAiFxtE0CYaKMHgcsMlMcv7Ubtvjveu2YwB/7rLtvu257TbhAgKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC0g5tl23Pd47/fYOwGfHtvOvTwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABf8wIQ7tzONLySTAAAAABJRU5ErkJggg==

And I test it on chrome and firefox

chrome

data:image/png;base64,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

Firefox

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAACVklEQVR4nO3UMQ2AAAADwSpAHZrRxcKAAsgnd0n3Tr9t17NzAAHnhAuIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4gR7iAHOECcoQLyBEuIEe4gBzhAnKEC8gRLiBHuIAc4QJyhAvIES4g5x0ugITj7wMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAZ24qWtu3/lkDYQAAAABJRU5ErkJggg==

Although 3 base64 codes show same images, I want to get same result with chrome or firefox. I don't know why jsdom + canvas returns such result. FYI, the result of firefox is more similiar. How can I get exactly same result with chrome or firefox with jsdom + canvas?

You can't have the same results, different UAs will use different settings for their encoders. The only way would be to implement the encoder from ImageBitmap data yourself. — Kaiido, Sep 20 '20 at 10:11
Now that I think more about it, if you really need it, you could actually use node-canvas (used by JSDOM) even in the browsers, this way you should have the same results everywhere. Edited the answer in the linked question. — Kaiido, Sep 20 '20 at 10:41

toDataURL of jsdom + canvas on node different result

0 Answers0