Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image resize before upload

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.

like image 466
ProfK Avatar asked Jun 07 '09 13:06

ProfK


People also ask

How do I resize an image without losing content?

If you want to resize an image without losing quality, you need to make sure that the "Resample" checkbox is unchecked. This checkbox tells Paint to change the number of pixels in the image. When you uncheck this box, Paint will not change the number of pixels, and the quality of the image will not be reduced.

How do you resize and copy in Photoshop?

Holding the Shift key centers the copied layer on the canvas. Then press Command/Ctrl+T or choose Edit > Transform > Scale to re-size the layer. Drag a corner anchor of the bounding box to resize it.


2 Answers

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); 
like image 70
Nicolas BADIA Avatar answered Sep 24 '22 22:09

Nicolas BADIA


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.

like image 24
calavera.info Avatar answered Sep 22 '22 22:09

calavera.info