Image Resize

var uploader = new MultipleUpload(el, {
 uploadUrl: '/api/upload',
 accept: 'image/*',
 onBeforeUpload: function(task, done) {
 resizeImage(task.file, 800, 600, 0.8, function(blob) {
 task.file = blob; // Replace with resized version
 done();
 });
 }
});

function resizeImage(file, maxW, maxH, quality, callback) {
 var reader = new FileReader();
 reader.onload = function(e) {
 var img = new Image();
 img.onload = function() {
 var ratio = Math.min(maxW / img.width, maxH / img.height, 1);
 var canvas = document.createElement('canvas');
 canvas.width = img.width * ratio;
 canvas.height = img.height * ratio;
 canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
 canvas.toBlob(callback, 'image/jpeg', quality);
 };
 img.src = e.target.result;
 };
 reader.readAsDataURL(file);
}

Shrinking before the upload

imageResize defaults to null. Configured with bounds, images are scaled down in the browser and the smaller file is what travels — so a phone photo never reaches your server at full size, and never counts against a body-size limit.

Bounds, not a target

The maximums are a bounding box: aspect ratio is preserved, and an image already inside the bounds is left alone rather than being scaled up. That is why setting generous bounds is safe — it affects only the files that were oversized to begin with.