Disabling image smoothing algorithm

[EricKrief]

I've played around with your stackblitz example it looks really nice.
When I zoom in all the way I don't see the image getting pixelated.
Is there an image smoothing algorithm in the background? If so, is there a way to disable it?
I actually need the image to pixelate when the user zooms in enough.

[jongbonga]

did you set imageQuality to 100? The default is set to 90

[EricKrief]

Now I have, still no luck.
Is there some kind of image smoothing algorithm? Can I disable it?

[lucas-implanta]

That's a interesting question, because I have noticed when I upload a image to the cropper, it actually increases significantly the image size, I was running some tests with a image that has 3.5MB, and the output after using the image cropper was a image with 9MB!

Is this behavior intentional? It makes me wonder why it almost triplicated the file size, kinda looks like it does have endeed some algorithm applied to the image when it's emitted 🤔

*Edit:

It seems that, using [imageQuality] and set the value to around 90, and set the [format] to "jpeg" (I was using "png"), you can control the image quality and try to balance between size and quality, now the image with 3.5MB outputs to less than 1MB 😳

I think it's all about the png format, by definition, png images are heavier than jpeg ones, so if anyone is facing this problem, consider tweaking these settings.

[Mawi137]

Seems like there is an option for that on the HTML canvas: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled

Feel free to add it as an option.

The reason the size increases is because the HTML canvas outputs a base64 string which is no compressed. It contains the data for each pixel. Using jpeg helps a lot with the file size. Using blob as output might help as well.