Image Resize

Client-Side Resize Before Upload

Resize images on the client before uploading to reduce file size and bandwidth usage. The Canvas API scales the image to the specified maximum dimensions while maintaining the aspect ratio.

Drag & drop files here, or paste from clipboard
Quality: 85% 
<au:AjaxFileUpload ID="Uploader1" runat="server"
    EnableImageResize="true"
    ImageResizeWidth="800"
    ImageResizeHeight="600"
    AllowedExtensions=".jpg,.jpeg,.png,.webp"
    AutoUpload="false" />

// Manual resize via JavaScript:
function resizeImage(file, maxDim, quality, callback) {
    var img = new Image();
    img.onload = function() {
        var scale = Math.min(maxDim / img.width, maxDim / img.height, 1);
        var canvas = document.createElement('canvas');
        canvas.width = img.width * scale;
        canvas.height = img.height * scale;
        canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
        canvas.toBlob(callback, 'image/jpeg', quality / 100);
    };
    img.src = URL.createObjectURL(file);
}