Image Resize

Resize images client-side before uploading using a canvas element. Reduce file size and dimensions automatically.

Max dimensions:

Width: Height: Quality: 80%

Drag & drop images here

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);
}