1. Demos
  2. Image Handling

Image Resize

Demo uploads land in a temporary store and are swept after 60 minutes. To keep files, handle FileUploaded — see Single File for the complete save pattern.
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.

What you should see: images downscaled to fit 800×600 in the browser before upload - a large photo leaves as a fraction of its size. Auto-upload is off to let you inspect the result.
Drag & drop files here, or paste from clipboard
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();
 var objectUrl = URL.createObjectURL(file);
 img.onload = function() {
 URL.revokeObjectURL(objectUrl);
 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.onerror = function() { URL.revokeObjectURL(objectUrl); };
 img.src = objectUrl;
}