Image Crop

// Read image, draw to canvas with crop, then upload
var canvas = document.getElementById('cropCanvas');
var ctx = canvas.getContext('2d');

function cropAndUpload(img, top, right, bottom, left) {
 var cw = img.width - left - right;
 var ch = img.height - top - bottom;
 canvas.width = cw;
 canvas.height = ch;
 ctx.drawImage(img, left, top, cw, ch, 0, 0, cw, ch);

 canvas.toBlob(function(blob) {
 var uploader = new MultipleUpload(el, { uploadUrl: '/api/upload' });
 uploader.addFile(blob, 'cropped-image.png');
 uploader.startUpload();
 }, 'image/png');
}

Cropping before the upload

The crop happens on a canvas in the browser, so what reaches the server is the cropped image and nothing larger. The user sees exactly the framing that will be stored, which is the point — a crop applied later by CSS or a thumbnailer is a decision nobody made.

Locking the ratio

Where the output is displayed in a fixed shape — a square avatar, a 16:9 banner — constraining the crop box to that ratio removes a whole class of disappointment. Leave it free where the image is shown at its own proportions.