Feature request: Support for image compression

[Aarbel]

Libraries like https://www.npmjs.com/package/browser-image-resizer allow to compress drastically images client side (set maxWidth and maxHeight, but also reducing file size)

Is there a way to achieve that with blueimp-load-image ?

Thanks a for your help !

[blueimp]

Hi @Aarbel,

you can already reduce the size of images loaded via loadImage by scaling them down in size and by using the quality argument for the browser-native canvas.toBlob function.

e.g. the following exports a JPEG blob with a quality of 0.5:

canvas.toBlob(callback, 'image/jpeg', 0.5);

In browsers that support it, you can control the scaling algorithm used by the browser canvas implementation via the imageSmoothingEnabled and imageSmoothingQuality options for loadImage.

The library you linked to seems to use bilinear interpolation implemented in JavaScript for image scaling - as far as I know, browsers already use bilinear interpolation by default in their canvas drawImage implementation, unless imageSmoothingQuality is set to high, which apparently uses Lanczos from what I've read.

So altogether I don't see a good reason to not rely on the browser-provided implementations.

[Aarbel]

@blueimp thanks a lot for the detailed feedback.

Do you think browsers like iOS Safari or Old Edge can support it ?

Do i need particular polyfills to make it work ?

[blueimp]

The canvas.toBlob documentation I linked above has a browser compatibility table at the end:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Browser_compatibility

I'm also maintaining a polyfill for older browsers (e.g. IE) as well:
https://github.com/blueimp/JavaScript-Canvas-to-Blob

[Aarbel]

Great, i will investigate and compare the two solutions

[blueimp]

With the information provided above, I assume you're fine with closing this?

[blueimp]

Closing as solved.

[Aarbel]

@blueimp sorry didn't saw your comments. Possible to re-open this issue ?

Standard browser image compression doesn't work well in many environments (WkWebview for example).

Still using browser-image-resizer at the moment, but uses a lot of cache / RAM in the browser because in perform two conversions (one with your lib, then one with browser-image-resizer)

[blueimp]

Hi @Aarbel, sorry for the late reply.
Yes, absolutely, we can reopen this issue.
It's unlikely that I'll be working on it anytime soon though.

[Aarbel]

@blueimp thanks a lot for your feedback, do you plan to provide this feature at some point ?

Thanks a lot