Image Crop

Client-Side Crop Before Upload

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.

Drag & drop files here, or paste from clipboard
// 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);