Image Crop

Simple client-side image cropping before upload using a canvas element. Select a crop region and upload the result.

1. Select an image to 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');
}