Client Side Image Resizing

[Pete]

This is a topic I check out every now and again because, especially on photo-heavy websites, some "seamless" way of resizing images before they are uploaded is something I've always wanted.

You know the scenario - someone shoots a bunch of images with their 21 megapixel camera, tries to upload them not thinking about file sizes and the page hangs for ages whilst the image is resized. Or, worse, it times out because you didn't give PHP enough memory or increase the max execution time.

I've tried a few PC-based tools to make like easier for clients - some in Windows are part of the right-click menu even, so they just need to remember to right-click and resize. But wouldn't it be nice to have something that does it automatically?

Well this might just be the answer: https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing - which is part of a larger library: https://github.com/blueimp/jQuery-File-Upload

My question, because I just don't have time right now (lame excuse, but I've got a lot on and this may be of interest to you guys anyway), is whether anyone else has tried this particular set of scripts out, or if the image manipulation gurus amongst us (I'm looking at you Horst ) have considered something like this (canvas to blob conversion on-the-fly before upload seems to be what's happening here) or whether something like that seems simply too volatile - I imagine on huge images it could consume a lot of memory on the person's PC, which is still quicker as a smaller file is uploaded, but may have other side-effects.

I have used a Java applet in the past primarily to handle huge files, but that also had some client-side image manipulation built-in, but Java is such a security issue nowadays it's unbelievable. Plus it requires Java to be installed in the first place, so something JavaScript-based, using browser features like canvas if they're available seems ideal, with fallback to simply uploading the large file and letting the server resize the image.

One to think about anyway. I'm sure the W3C will eventually roll out a recommendation for browser-side manipulation, but as we know update and implementations are always guaranteed to come quickly or work consistently.

[teppo]

Haven't tried it and can't provide any real expertise here (sorry!) but the problem is quite familiar. If this solution (or something similar) works, and if we could benefit from it right within ProcessWire's Admin, I'd be very, very happy

"ecause you didn't give PHP enough memory or increase the max execution time" tends to be the problem with server-side solutions. There's always finite amount of memory, and vastly increasing memory limits in order to account for some specific memory-intensive tasks means that one can no longer count on the memory limit as a safety mechanism.. and that is just asking for trouble. Same thing goes for max execution time.

[Pete]

The other thing I liked about this particular plugin is that it suggests support for reaaaaally old browsers too, so whilst we don't need to support older than the PW admin itself supports, it could be very useful for front-end upload implementations too where similar issues crop up.

I really need to free up time to test this.

[OLSA]

Hello Pete,

I made custom Media manager for Joomla 3 and there used Plupload javascript library for upload process.

Also have some clients where they uploads >20 of large images at once (cheap shared hosting).

Here is link with few images (upload process, and resized images after uploads).

regards,

Sasa

[mr-fan]

May this one is it worth to test with AdminCustomFiles on the existing UI File input?

https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

would prefer a js/canvas magic that could be tied on the existing file/image upload...

Since i'm working with shared hosting a lot - i would be interested in a easy solution, too.

Until now i'd no big problems to tell the client to resize images before upload - but this workflow feel not really like "working in web 2015" it feels more like "working in web 2005"

regards mr-fan

[Pete]

Hi Sasa

I think I've used that one in the past. It has Flash fallback etc, but the one I linked to (same one that mr-fan linked to ) seems to be pure javascript so compatible with most browsers without needing to rely on a client's device having anything else installed other than javascript - I think that's where it stands out against other solutions.

[Pete]

Just tested this and it works really well.

I'm sure there's a more elegant way of changing the settings, but if you put this package on your server, edit js/main.js and change this near the top:

$('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: 'server/php/'
    });

to this:

$('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: 'server/php/',
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator && navigator.userAgent),
        imageMaxWidth: 800,
        imageMaxHeight: 800,
        imageCrop: false // Force cropped images
    });

Then open the "Basic plus ui" tab on that package with Firebug on in Firefox then you can see it's sending image data rather than a file, so is resizing client-side really nicely.

I just tested it on a massive image from my PC and the upload was really quick - I added a 3.5mb photo to the upload queue, it generated a tiny thumbnail instantly and told me it was going to upload just 171.24kb and it did

EDIT: 7mb file worked just as quickly. This is like magic!

[Pete]

There does also seem to be a limit to what you can throw at it and I'm not sure why. I can't get anything above 7mb to work which could be a problem with larger photos, but it does fall back to the old faithful way of simply uploading the huge file and letting the server process it which is nice I guess.

I'm probably just missing a setting somewhere.

[mr-fan]

Great to hear - will test asap! thank you Pete for sharing basic implementation!

Have you tested with PW Backend, too?

[teppo]

There does also seem to be a limit to what you can throw at it and I'm not sure why. I can't get anything above 7mb to work which could be a problem with larger photos, but it does fall back to the old faithful way of simply uploading the huge file and letting the server process it which is nice I guess.

I'm probably just missing a setting somewhere.

I'm seeing two settings that could have something to do with this: maxFileSize and loadImageMaxFileSize. Latter seems to be 10MB by default, so not too far from what you've mentioned here.

[Pete]

Thanks teppo - changed loadImageMaxFileSize to 100mb and it worked with a 19.5mb image. The thumbnail only took a second to display on the uploader

@mr-fan - that's a much larger job unfortunately, but hopefully this proves impressive enough that it will be considered for the backend.

Here's a screencast for those wondering what the fuss is about: http://www.screencast.com/t/CuAwqAc8G (ignore the white rectangle that appears when browsing files to upload, that's just me hiding stuff )

That's about 26mb worth of images resized to max width or height of 800px. So 26mb becomes 1.37mb prior to upload.

My jaw is somewhere near the floor right now that this is all just JS, HTML canvas etc with fallbacks for even really old browsers No sound on the audio clip at the end but use your imagination - it plays direct from your PC before upload. That's probably more useful for videos to make sure you're uploading the right one!

[LostKobrakai]

Damn that looks really slick. 

[Pete]

Oh it gets better, try this one with huge images and video too: http://www.screencast.com/t/OsrLgSs4hlDk

The only thing slowing it down was the video - those 3 images were massive as you saw, and the thumbnails appeared in the browser instantly because it's client-side. So that was ~50mb of image files there too resized before upload.

[tpr]

According to this, FineUploader also supports client-side resizing:

http://docs.fineuploader.com/branch/master/features/scaling.html

I haven't tested this feature but I used Fine Uploader itself in the past and worked well. It can work without jQuery (vanilla JS)

Browser compability:

This feature is supported on all browsers other than IE9 and older, Android 2.4 or older, and Safari 5.1 or older. Note that Android's stock browser is also not supported, due to multiple long-standing bugs in that browser with Blobs and data URIs. Chrome on Android is supported, though.

[OLSA]

Hi Sasa

I think I've used that one in the past. It has Flash fallback etc, but the one I linked to (same one that mr-fan linked to ) seems to be pure javascript so compatible with most browsers without needing to rely on a client's device having anything else installed other than javascript - I think that's where it stands out against other solutions.

No Pete, flash is just one of options (eg. if browser doesn't support html5).

Here on this link you can test various runtime options (link). 

From Github (link):

"Plupload is JavaScript API for building file uploaders. It supports multiple file selection, file filtering, chunked upload, client side image downsizing and when necessary can fallback to alternative runtimes, like Flash and Silverlight."

EDIT:

Now I am reading my posts and it's looks like I am an Plupload advocate - NO I am not.

This is interesting topic and only what I want is to recommend it because I have positive experiences with it. It was ~30 min. job for integration in my project, and all that works without any problems.

Also it is widely used by Drupal, Wordpress, Django... developers, old project, open source... And about Flash/Silverlight - on developer side is to allow or not support for that (script configuration) .

That's it. I promise that I will no more talk about Pxxxx

Thanks to HTML5, we can exclude Flash/Silverlight/Java technologies and use only javacsript + HTML5 to get all that magic on client side (canvas object for image resize, "multiple" for simple multiple file selection).

regrads

[Pete]

I know there are other options with Plupload, but I was looking for something that required no other browser plugins (yes, I know Flash and silverlight are optional, but I believe they are also declining in popularity quite rapidly).

[teppo]

Agreed with Pete. At this point Flash and Silverlight are nothing more than unnecessary legacy payload and clutter. I'd rather use a clutter-free library than one attempting to cater for the needs of all the old (and outdated) browsers with any means necessary.. so to speak

[apeisa]

Yeah, google gears should be the way to do it, if Java applets are not possible!

On serious note, this would be great!

[adrian]

Great discussion everyone. In a hurry, but just wanted to mention that I have used that blueimp uploader on a site for several years now and found it awesome, so these guys definitely do good work!

[bernhard]

...and if we could benefit from it right within ProcessWire's Admin, I'd be very, very happy

me too!

i did some testing on blueimp back in my joomla days and liked it. unfortunately the budget for this job was too small so i didn't realise it and have no "real world experience". it is also capable of uploading very large files in smaller chunks (eg videos).

would really be great to have a client side resize in PW 2.7

[mr-fan]

i found a tutorial about a integration of the jquery Upload Plugin witha complete own UI and a own PHP script to execute the fileupload...maybe as a example how the jquery magic could used within PW inputfield image?

http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/

It seems that i should be possible to use the script with minimal setup on different/own UI...to use needed functions.

May after a important personal date this month i've some time to learn and try may to test some basic implementions - what i could imagine is a custom upload module as kind of admin tool - where you can select a page and a imagefield and combine jquery upload plugin with saving the final upload via API....we will se.

anyway it would be great directly in the inputfield...

[benbyf]

Currently working on a html5 / js web app that turns an image into a pixelated version and found it simple to set up, on the back of this I could create a github version which is more about minimising size if someone else wants to spin it into a field type for PW. Lots more testing a to be done but looks positive.

demo of what i have currently - https://dl.dropboxusercontent.com/u/608298/pixelator-gif.mov

[LostKobrakai]

I don't want to nitpick to much, but there isn't even a new fieldtype necessary, as it won't even know the difference. Only the inputfield would need some enhancement to make this work.

[renobird]

uhhh, whoa. I'm cautiously excited here.