Client side image resizing and cropping

Ever wonder why your server has to take the performance hit for someones crazy 8000x8000 photo for your image fields? Wonder no more! With client side resizing you'll be able to benefit from HTML5 canvas feature, FileReader, and Image functionality. This allows for the image to be resized and converted to raw image data for uploading! Meaning it's resized to your image fields specifications before it's uploaded and eliminates the performance hit your server would otherwise take.

 

It does this by shutting off the upload input to stop the upload and adds a hidden input with the resized image data. This image data is then turned into a tmp file and validated accordingly, but don't worry as the data it self is also validated server side. For this example we'll use the below sample image (resized for this page, but it's much larger than shown).

Below are some details about how the data submits.

You'll notice the newly generated hidden input in the DOM will be directly below your file input. This is a quick way to check if your image was converted or if your browser even supports this functionality. All modern browsers and mobile devices SHOULD, but if they don't it won't cause problems and will just upload as normally. You'll notice the POST data now no longer contains the file, but its data.

This is very important as we do not want to send the file for uploading to PHP tmp. Those resources now do not need to be allocated for processing the 1200x600 sample image. Now for the result of all of this.

This is a fantastic way to lessen the burden on your server when processing image fields. This functionality will also be extended to be used in CB Gallery in a later release. The question is what comes next after this? Well hopefully client side cropping! With client side cropping your users aren't forced to have the center of an image cropped. They can not select how they want their image cropped. This is done by setting "Maintain Aspect Ratio" to "Yes, with User Cropping" as follows.

Now for the fun part. When an image is uploaded and it exceeds the maximum dimensions it will downscale, but it will keep its aspect ratio. So lets say the width is too large. This means it needs to be cropped. Immediately after selecting a file all of these checks are executed and a cropping usage is shown below the field if necessary. Example as follows.

This functionality applies to all image fieldtypes so now it's easier than ever to have nicely squared avatars!

Note this does not work on mobile devices at this time due to jQuery UI not listening to mobile touch events. This will be fixed in a later CB release where those events are properly mapped.



peli_m's Avatar
peli_m replied the topic: #286819 7 years 5 months ago
Thank you for your answer
krileon's Avatar
krileon replied the topic: #286777 7 years 5 months ago

It doesn't work in Ajax mode: it resize the image but not cropp it.

Correct, it's done via a validation rule, which seam to be broken in the ajax usage entirely. Have added a bug ticket to fix in CB Core Fields Ajax.

In tablets (iPad) and Android phones it seems doesn't work: Its not possible to move the area to crop and the image is resized but it isn't cropped. The image can be taken from the camera of the movile device on the fly, which is wonderful :woohoo: .

It's using jQuery UI draggable, but looks like it's only listening to mouse events and not the touch events. Have added a bug ticket to investigate further. Looks like we may have to add another core jQuery plugin to give jQuery UI mobile compatibility or I'll just map those events in the jQuery usage.
peli_m's Avatar
peli_m replied the topic: #286768 7 years 5 months ago
In computers It works like a charm in Edit your details area. It doesn't work in Ajax mode: it resize the image but not cropp it.

In tablets (iPad) and Android phones it seems doesn't work: Its not possible to move the area to crop and the image is resized but it isn't cropped. The image can be taken from the camera of the movile device on the fly, which is wonderful :woohoo: .

Thank you very much for your develop and support. It is a major improvement.
nant's Avatar
nant replied the topic: #286766 7 years 5 months ago

peli_m wrote: Great news!. It will save me a lot of work. When will it be available?


It is already available in latest build.
peli_m's Avatar
peli_m replied the topic: #286765 7 years 5 months ago
Great news!. It will save me a lot of work. When will it be available?

Facebook Twitter LinkedIn