<%@ 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>
