<%@ 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.0 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> <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">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> <span class="text-muted small">Quality:</span> <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" 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" 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" 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();
 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);
}</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;

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

 var uploader = AjaxUploader.getInstance('Uploader1');
 if (uploader) {
 uploader.on('select', function(files) {
 var file = files[0].file || files[0];
 var maxDim = parseInt(document.getElementById('maxDim').value);
 var quality = parseInt(qualityInput.value);
 var img = new Image();
 img.onload = function() {
 document.getElementById('originalInfo').textContent = img.width + 'x' + img.height +
 ' (' + AjaxUploader.formatSize(file.size) + ')';
 document.getElementById('originalPreview').src = img.src;
 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;
 document.getElementById('resizedInfo').textContent = resizeCanvas.width + 'x' +
 resizeCanvas.height + ' (' + AjaxUploader.formatSize(blob.size) + ')';
 result.style.display = 'block';
 }, 'image/jpeg', quality / 100);
 };
 img.src = URL.createObjectURL(file);
 return false;
 });
 }

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