Javascript based client image

Question

I want to use javascript or jQuery to crop and compress the image on the client side before uploading to the server.

Workflow:

• Choose image
• Crop image to a specific size
• Trim Compression
• Download

Has anyone done this before? Which plugin or what should I do?

I see that facebook can compress images and automatically resize them before uploading.

Answer 1

EDIT (2014): This answer is deprecated! JavaScript is a programming language with realities that greatly influence which browser resources they become available. Three years ago, when this post was made (July 2011), the browser did not have the kind of reliable functionality that would allow the OP to do what it asked, hence my answer.
If you are still interested in how this can be done now, consult some of the many answers to this question that appeared in the meantime on SO. But please do not force yourself further comments on this answer, because it is clearly pointless. Thank.

Simply put, JavaScript is not intended to do what you ask for. Regardless of the service you come across that gives you the ability to manipulate selected images, you can bet your money so that the image is fully uploaded to the server before other features are offered.

Answer 2

You can do this using base64, look at the site I'm working with: http://www.wordirish.com all images are processed on the client side using HTML5 or flash for older browsers.

you just need to do this:

function thisFunctionShoulBeCallByTheFileuploaderButton(e){ e.preventDefault && e.preventDefault(); var image, canvas, i; var images = 'files' in e.target ? e.target.files : 'dataTransfer' in e ? e.dataTransfer.files : []; if(images && images.length) { for(i in images) { if(typeof images[i] != 'object') continue; image = new Image(); image.src = createObjectURL(images[i]); image.onload = function(e){ var mybase64resized = resizeCrop( e.target, 200, 150 ).toDataURL('image/jpg', 90); alert(mybase64resized); } } } } function resizeCrop( src, width, height ){ var crop = width == 0 || height == 0; // not resize if(src.width <= width && height == 0) { width = src.width; height = src.height; } // resize if( src.width > width && height == 0){ height = src.height * (width / src.width); } // check scale var xscale = width / src.width; var yscale = height / src.height; var scale = crop ? Math.min(xscale, yscale) : Math.max(xscale, yscale); // create empty canvas var canvas = document.createElement("canvas"); canvas.width = width ? width : Math.round(src.width * scale); canvas.height = height ? height : Math.round(src.height * scale); canvas.getContext("2d").scale(scale,scale); // crop it top center canvas.getContext("2d").drawImage(src, ((src.width * scale) - canvas.width) * -.5 , ((src.height * scale) - canvas.height) * -.5 ); return canvas; } function createObjectURL(i){ var URL = window.URL || window.webkitURL || window.mozURL || window.msURL; return URL.createObjectURL(i); } 

piece of cake;)

Answer 3

You can crop them using HTML5 Canvas:

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

Answer 4

Modern browsers now support a lot of image manipulation through jquery and html5 canvas. Tools that can be used to achieve this include:

Resize and crop for jQuery (ClientSide)

Pixel Image Processing Library

HTML5 Canvas Image Optimization

I hope this is useful for those looking for similar solutions ...