Resize photos on a client side

[hurgadan]

In my application I have a gallery (slider) and users can take few photos from smartphones gallery and upload it after to the server, but smartphones have a big camera resolution and photos are very big - over 5 Mb per photo and more. I want to resize photo to lower resolution before upload but can’t find any acceptable solution.
Any ideas? )

[druppy]

To my best of knowledge, this needs to be done on you server (imagemagick is really helpful here), but scaling it down to a more manageable size.

[hurgadan]

@druppy yes, but if user want to add 10 photos to gallery and each photo about 5 Mb then summary traffic will be 50 Mb, a bit too much. I will do it if dont find any other solution.

[benoitranque]

Maybe this can help?

[druppy]

Interesting idea, to use canvas as resize tool and output as URL encoding …

[robertvincent]

You can use Facebook Messenger to lower image size, or you can use paint it tool in windows OS, canva also works good. If you know how to use PS / photoshop then other things you don’t need to use.

[Arkshine]

In a project, I’m using this lib https://fengyuanchen.github.io/compressorjs/ ; it allows to resize/compress.
Used with Uploader component.

Though, to use it before it’s being uploaded and to show the final size properly, you need to create your own component based on QUploaderBase (purpose is to overwrite __add_files method, so you can call the parent method once you resize/compressed the files). I don’t think there is a better way, but it works fine for me.