search

blueimp / JavaScript-Load-Image

Load images provided as File or Blob objects or via URL. Retrieve an optionally scaled, cropped or rotated HTML img or canvas element. Use methods to parse image metadata to extract IPTC and Exif tags as well as embedded thumbnail images, to overwrite the Exif Orientation value and to restore the complete image header after resizing.
https://blueimp.github.io/JavaScript-Load-Image/
MIT License
4.46k stars 923 forks source link

Feature request: Support for image compression #120

Open Aarbel opened 4 years ago

Aarbel commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

Great, i will investigate and compare the two solutions

blueimp commented 4 years ago

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

blueimp commented 3 years ago

Closing as solved.

Aarbel commented 3 years ago

@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 commented 3 years ago

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 commented 2 years ago

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

Thanks a lot