I have noticed some tiny compression after using canvas and javascript to process the image.

The left side is processed and the right side is raw, they are both in jpeg format. What I do is load the raw image to canvas then read data from the canvas and save it as a file.

I need to make some edits to the image like adding a watermark. Currently, I’m using canvas but my project is sensitive to image quality, so I tried to avoid any unexpected compression.

I’m looking for a method that can avoid this kind of compression. My project is mainly written in JavaScript, so having a solution based on JS would be the best option (frontend solutions and serverside solutions are both ok for me).

THANKS.