canvas.toDataURL() method will make image larger in size

[ravipatel2293]

I'm using fabric.js for image modification(Put text only image0.
After modification done when i download image using toDataURL() method it will result very large image in size.
For example my source image is 2MB only but when i download it after putting some text on the canvas it will increse downloed image size to 13MB which is surprised to me.
Any help in this appreciated.
Thanks.

[updbqn]

https://fabricjs.com/docs/fabric.Canvas.html#toDataURL

Try setting format to jpeg and adjusting the quality value.

[asturur]

It depends how big is the image you download.
13Megs is a big picture.
What kind of picture are you creating? What size? What format? png or jpeg?

[ravipatel2293]

@asturur :The original image resolution is 3914*2935 and it is jpg image.The size of original image is 2.3MB only.
And image which i download is with the same resolution and jpg image even though it's size is 8MB.
I'm using toDataURL() method with jpeg compression to download the image.

Thanks!

[ravipatel2293]

@fte10kso : If I use quality parameter then it will distort the downloaded image? I have a doubt regarding the quality that's why.

[updbqn]

I'm not an expert on image compression but...

Since jpeg is lossy you will always lose some information even when quality is 1. This is more noticeable for things like text. As you've already noticed changing format from png (lossless) already reduced your file size by 5MB.

What level of compressions is acceptable will depend on the image and what you want to use it for.

If I'm not mistaken fabric just uses the corresponding canvas method when saving (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL).

You could try creating a regular canvas with just the image to see if you get a different result.

Most likely the original image already has additional compression. e.g using ImageMagick convert and this image

➜   identify test.jpg 
test.jpg JPEG 4096x2726 4096x2726+0+0 8-bit sRGB 2.591MB 0.010u 0:00.000
➜   convert -quality 100 test.jpg test2.jpg
➜   du -h * 
5,5M	test2.jpg
2,5M	test.jpg

[asturur]

So the point is that your original jpeg is probably looking good, but with some compression artifact you can see if you zoom.

When applying this on the canvas and saving with jpeg 100% quality the canvas will apply jpeg compression on what is now a pure bitmap with no image format.

Your picture has added crispness or details that are the compression artifact or loss from the previous jpeg. This make the job for the jpeg algorithm harder since it has to save more stuff. A quality parity the size increase probably each jpeg saving, while at size parity the quality decrease.

You have to use quality parameter on jpeg, and yes you will loose a bit of quality since canvas JPEG compression is not the best in class