Crop an image on the client side before uploading using the HTML5 Canvas API.
Select a crop region, preview the result, then upload only the cropped area.
What you should see: an interactive crop step before upload - the server receives the cropped result, not the original. Auto-upload is off so the crop happens first.
Drag & drop files here, or paste from clipboard
Cropped Preview
// Load image to canvas, crop, then upload as Blob
var ctx = cropCanvas.getContext('2d');
ctx.drawImage(sourceCanvas, x, y, w, h, 0, 0, w, h);
cropCanvas.toBlob(function(blob) {
var file = new File([blob], 'cropped.jpg', { type: 'image/jpeg' });
uploader.addFiles([file]);
uploader.startUpload();
}, 'image/jpeg', 0.9);