Image resizing client-side with JavaScript before upload to the server

Here's a gist which does this:https://gist.github.com/dcollien/312bce1270a5f511bf4a

(an es6 version, and a .js version which can be included in a script tag)

You can use it as follows:

<input type="file" id="select"><img id="preview"><script>document.getElementById('select').onchange = function(evt) {    ImageTools.resize(this.files[0], {        width: 320, // maximum width        height: 240 // maximum height    }, function(blob, didItResize) {        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')        document.getElementById('preview').src = window.URL.createObjectURL(blob);        // you can also now upload this blob using an XHR.    });};</script>

It includes a bunch of support detection and polyfills to make sure it works on as many browsers as I could manage.

(it also ignores gif images - in case they're animated)

The answer to this is yes - in HTML 5 you can resize images client-side using the canvas element. You can also take the new data and send it to a server. See this tutorial:

http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

If you were resizing before uploading I just found out this http://www.plupload.com/

It does all the magic for you in any imaginable method.

Unfortunately HTML5 resize only is supported with Mozilla browser, but you can redirect other browsers to Flash and Silverlight.

I just tried it and it worked with my android!

I was using http://swfupload.org/ in flash, it does the job very well, but the resize size is very small. (cannot remember the limit) and does not go back to html4 when flash is not available.