Feature request: compress images from file input on all devices, for fast upload to back-end

[Aarbel]

Problem

Images coming from files inputs are basically not compressed.
These images can be very heavy, so it can be very long to upload with slow connexion (and even with a fast one).

Feature request

Have an api / simple method to compress images coming from files inputs on the front-end side before sending them to back-end.
It should be great to use native CPU on mobile, and not webview CPU which can be limited.
Having the same returned type of files as Camera would also be great ! (‘Base64’, ‘DataUrl’ or ‘Uri’... and not Filelist).

(Images coming from Camera can be compressed and reduced in size thanks to Camera api, no problem on this side)

Thanks a lot for your help !

[Aarbel]

Browser image resizer could be a good solution, but faced this issue: ericnograles/browser-image-resizer#39

Wkwebview doesn't seem to support classic browser APIs to reduce files images. Could be great to have a polyfill or adaptative method to compress image file.

[Aarbel]

https://github.com/autobotsrocks/cordova-imageResize or https://github.com/JoschkaSchulz/cordova-plugin-image-resizer seems to be a good start

[notflip]

These plugins are both very outdated

[sandstrom]

This is another good resize library: https://github.com/nodeca/pica

[sandstrom]

@notflip Try this one, we're using it and it works well.

[notflip]

What is the difference between using Pica or just lowering the quality and size in the CameraOptions? https://capacitorjs.com/docs/apis/camera#imageoptions

[sandstrom]

Don't know, haven't tried, but probably no difference. We're using Pica because we aren't using the Capacitor Camera Plugin to take the photos (we're using the native file element with the capture property).

[notflip]

Aha I see! Good point, is there any reason why you're not using the camera plugin?

[sandstrom]

For iOS at least, it worked just as well with the input element, and having fewer native addons makes it easier to develop in the browser, or share code with a desktop client.

We still use a bunch of native plugins, but only where the browser APIs doesn't suffice.