Client-side image resizing before upload - Megapixels (Mb) rather than Image Resolution (pixels)

filemanager

#1

Is there a way to resize images and reduce file size client-side, before uploading? BlueImp’s jQuery File Upload plugin for PHP would do this very well and it would dramatically reduce upload time and bandwidth usage especially for those on mobiles.


Image Resizer functionality applied to the images on the page
If George was Santa Claus what would be on your list
#2

We don’t have that yet - but it is a good feature request! So will move it there, so people can vote on it


#3

Just wanted to give this a little nudge as I am sure there are plenty of people out there that would vote for this as a new feature.
Vote Vote Vote
:smiley:


Add DMXzone DropZone Add-on into Wappler
#4

works fine on mobile:

https://fengyuanchen.github.io/jquery-cropper/

or use croppie


#5

Hi @Freddy_Blockchain and thanks for your suggestions. I have used the jquery-cropper before :smiley:

This request is for resizing the image in Megapixels (Mb) rather than Image Resolution (pixels). In my case
the user often has no idea about megapixels and how it affects the upload speed. And they certainly have no idea how to reduce the image first, so I need a way to automatically reduce the filesize before the image is uploaded. An image cropping tool would be a welcome addition, as would other editing tools such as adding text, shapes and arrows but all as options.

The idea comes from BlueImp’s jQuery File Upload plugin for PHP https://github.com/blueimp/jQuery-File-Upload and in particular

  • Client-side image resizing:
    Images can be automatically resized on client-side with browsers supporting the required JS APIs.

As an example, this is where the image to be uploaded is automatically resized on the device (mobile or PC) as part of the upload procedure from, say, 8Mb to 300Kb without changing the overall width or height, without cropping the image and without noticeable loss in quality. So no need for user intervention. I have implemented this on various sites and it works very well. It’s ideal for mobile use but just as good for desktop as it

  • reduces upload time and bandwidth usage
  • minimises storage space on the server
  • faster page views when recalled and faster slideshows
  • enables quicker downloads
  • all without further processing on the server side

I hope this makes my request a bit clearer.

Merry Christmas :beer: :christmas_tree: :gift:


#6

Anymore votes for this?
What we are looking for here is a way to reduce the size of a file BEFORE it is uploaded but with minimal loss, therefore speeding up the upload time, minimising bandwidth usage, and minimising server storage space. This is primarily aimed at mobile uploads but obviously has advantages at all levels.

The idea comes from BlueImp’s jQuery File Upload plugin for PHP https://github.com/blueimp/jQuery-File-Upload and in particular

  • Client-side image resizing:
    Images can be automatically resized on client-side with browsers supporting the required JS APIs.

Come on guys, more votes needed to move this up the list :smile: