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.
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.
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.
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);
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With