Repository navigation
Feature request: Support for image compression #120
Description
Activity
Hi @Aarbel,
you can already reduce the size of images loaded via
loadImageby 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
drawImageimplementation, unlessimageSmoothingQualityis 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.
Reacted by ŽilvinasThe
canvas.toBlobdocumentation I linked above has a browser compatibility table at the end:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Browser_compatibilityI'm also maintaining a polyfill for older browsers (e.g. IE) as well:
https://github.com/blueimp/JavaScript-Canvas-to-BlobGreat, i will investigate and compare the two solutions
With the information provided above, I assume you're fine with closing this?
Closing as solved.
@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-resizerat the moment, but uses a lot of cache / RAM in the browser because in perform two conversions (one with your lib, then one withbrowser-image-resizer)
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 !