<%@ Page Title="Image Resize" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Image Resize - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Image Resize</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Client-Side Resize Before Upload</div> <div class="demo-card-body"> <p class="demo-description"> 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.
 </p> <div class="demo-expect"><strong>What you should see:</strong> images downscaled to fit 800&times;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.</div> <au:AjaxFileUpload ID="Uploader1" runat="server"
 EnableImageResize="true"
 ImageResizeWidth="800"
 ImageResizeHeight="600"
 AllowedExtensions=".jpg,.jpeg,.png,.webp"
 AutoUpload="false" /> <div class="mb-3 mt-3"> <label class="form-label fw-bold" for="maxDim">Max Dimensions</label> <div class="d-flex gap-2 align-items-center"> <select id="maxDim" class="form-select form-select-sm" style="width:auto;"> <option value="320">320px</option> <option value="640">640px</option> <option value="800" selected>800px</option> <option value="1024">1024px</option> <option value="1920">1920px</option> </select> <label class="text-muted small" for="quality">Quality:</label> <input type="range" id="quality" class="form-range" min="10" max="100" value="85" style="width:120px;"> <span id="qualityLabel" class="small">85%</span> </div> </div> <div id="result" class="mt-3" role="status" aria-live="polite" style="display:none;"> <div class="row"> <div class="col-6 text-center"> <h6>Original</h6> <div id="originalInfo" class="small text-muted mb-1"></div> <img id="originalPreview" alt="Original selected image preview" style="max-width:100%;max-height:200px;border:1px solid #dee2e6;border-radius:4px;"> </div> <div class="col-6 text-center"> <h6>Resized</h6> <div id="resizedInfo" class="small text-muted mb-1"></div> <canvas id="resizeCanvas" role="img" aria-label="Resized image preview" style="max-width:100%;max-height:200px;border:1px solid #dee2e6;border-radius:4px;"></canvas> </div> </div> <button type="button" class="btn btn-success btn-sm mt-3" id="btnUploadResized">Upload Resized</button> </div> <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 EnableImageResize="true"
 ImageResizeWidth="800"
 ImageResizeHeight="600"
 AllowedExtensions=".jpg,.jpeg,.png,.webp"
 AutoUpload="false" /&gt;

// 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;
}</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var resizeCanvas = document.getElementById('resizeCanvas');
 var result = document.getElementById('result');
 var qualityInput = document.getElementById('quality');
 var qualityLabel = document.getElementById('qualityLabel');
 var resizedBlob = null;
 var resizePreviewUrl = null;

 if (qualityInput) qualityInput.addEventListener('input', function() {
 if (!qualityLabel) return;
 qualityLabel.textContent = this.value + '%';
 });

 var uploader = window.AjaxUploader && typeof AjaxUploader.getInstance === 'function' ? AjaxUploader.getInstance('Uploader1') : null;
 if (uploader) {
 uploader.on('select', function(files) {
 var file = files[0].file || files[0];
 var maxDimInput = document.getElementById('maxDim');
 var maxDim = parseInt(maxDimInput ? maxDimInput.value : '800');
 var quality = parseInt(qualityInput ? qualityInput.value : '85');
 if (!resizeCanvas || !result) return false;
 var img = new Image();
 var objectUrl = URL.createObjectURL(file);
 if (resizePreviewUrl) URL.revokeObjectURL(resizePreviewUrl);
 resizePreviewUrl = objectUrl;
 img.onload = function() {
 var originalInfo = document.getElementById('originalInfo');
 var originalPreview = document.getElementById('originalPreview');
 if (originalInfo) {
 originalInfo.textContent = img.width + 'x' + img.height +
 ' (' + (window.AjaxUploader && AjaxUploader.formatSize ? AjaxUploader.formatSize(file.size) : (file.size || 0) + ' B') + ')';
 }
 if (originalPreview) {
 originalPreview.src = objectUrl;
 }
 var scale = Math.min(maxDim / img.width, maxDim / img.height, 1);
 resizeCanvas.width = Math.round(img.width * scale);
 resizeCanvas.height = Math.round(img.height * scale);
 resizeCanvas.getContext('2d').drawImage(img, 0, 0, resizeCanvas.width, resizeCanvas.height);
 resizeCanvas.toBlob(function(blob) {
 resizedBlob = blob;
 var resizedInfo = document.getElementById('resizedInfo');
 if (resizedInfo) {
 resizedInfo.textContent = resizeCanvas.width + 'x' +
 resizeCanvas.height + ' (' + (window.AjaxUploader && AjaxUploader.formatSize ? AjaxUploader.formatSize(blob.size) : (blob.size || 0) + ' B') + ')';
 }
 result.style.display = 'block';
 }, 'image/jpeg', quality / 100);
 };
 img.onerror = function() {
 URL.revokeObjectURL(objectUrl);
 if (resizePreviewUrl === objectUrl) resizePreviewUrl = null;
 };
 img.src = objectUrl;
 return false;
 });
 uploader.on('taskComplete', function() {
 var button = document.getElementById('btnUploadResized');
 if (!button) return;
 button.disabled = false;
 button.textContent = 'Upload Resized';
 });
 }

 window.addEventListener('beforeunload', function() {
 if (resizePreviewUrl) URL.revokeObjectURL(resizePreviewUrl);
 });

 var uploadButton = document.getElementById('btnUploadResized');
 if (uploadButton) uploadButton.addEventListener('click', function() {
 if (!resizedBlob || !uploader) return;
 var file = new File([resizedBlob], 'resized.jpg', { type: 'image/jpeg' });
 if (typeof uploader.addFiles === 'function') uploader.addFiles([file]);
 if (typeof uploader.startUpload === 'function') uploader.startUpload();
 this.disabled = true;
 this.textContent = 'Uploading...';
 });
</script>
</asp:Content>
