Image resize before upload

Question

I need to provide a means for a user to upload photos to their web site in jpeg format. However, the photos are very large in original size, and I would like to make the resize before upload option very effortless for the user. It seems my only options are a client side application that resizes the photos before uploading them via a web service, or a client side JavaScript hook on the upload operation that resizes the images. The second option is very tentative because I don't have a JavaScript image resizing library, and it will be difficult to get the JavaScript to run my current resize tool, ImageMagick.

I'm sure this is not too uncommon a scenario, and some suggestions or pointers to sites that do this will be appreciated.

Answer 1

In 2011, we can know do it with the File API, and canvas. This works for now only in firefox and chrome. Here is an example :

var file = YOUR_FILE,     fileType = file.type,     reader = new FileReader();  reader.onloadend = function() {   var image = new Image();       image.src = reader.result;    image.onload = function() {     var maxWidth = 960,         maxHeight = 960,         imageWidth = image.width,         imageHeight = image.height;      if (imageWidth > imageHeight) {       if (imageWidth > maxWidth) {         imageHeight *= maxWidth / imageWidth;         imageWidth = maxWidth;       }     }     else {       if (imageHeight > maxHeight) {         imageWidth *= maxHeight / imageHeight;         imageHeight = maxHeight;       }     }      var canvas = document.createElement('canvas');     canvas.width = imageWidth;     canvas.height = imageHeight;      var ctx = canvas.getContext("2d");     ctx.drawImage(this, 0, 0, imageWidth, imageHeight);      // The resized file ready for upload     var finalFile = canvas.toDataURL(fileType);   } }  reader.readAsDataURL(file); 

Answer 2

There is multiple-technology-capable Plupload tool which declares that it can do resizing before upload, but I haven't tried it yet. I have also find a suitable answer in my question about binary image handling javascript libs.