CODEWITHSUNDEEP
javascriptnode.jsimageimage-processingcanvas
794TD
794TD

Reputation: 11

slight compression artifacts when processing images with canvas

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.

picture is here

Upvotes: 0

Views: 108

Answers (1)

794TD
794TD

Reputation: 11

I did some research later, and there are two API that can set image quality.

canvas.toBlob(callback, type, quality)

canvas.toDataURL(type, encoderOptions)

the quality parameter in toBlob and the encoderOptions parameter in toDataURL are used to set the image quality with a range from 0 to 1.

I have tested with canvas.toBlob(callback, type, quality). Setting the quality as 1 seems to have reduced the unexpected compression. Here is the test sample with the same image up there.

test sample

Upvotes: 1

Related Questions