<%@ Page Title="Image Crop" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Image Crop - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Image Crop</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Client-Side Crop Before Upload</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Crop an image on the client side before uploading using the HTML5 Canvas API.
            Select a crop region, preview the result, then upload only the cropped area.
        </p>

        <au:AjaxFileUpload ID="Uploader1" runat="server"
            EnableImageCrop="true"
            AllowedExtensions=".jpg,.jpeg,.png,.webp"
            AutoUpload="false" />

        <div id="cropArea" class="mt-3" style="display:none;">
            <div class="row">
                <div class="col-md-6">
                    <h6>Original</h6>
                    <div style="position:relative;display:inline-block;">
                        <canvas id="sourceCanvas" style="max-width:100%;border:1px solid #dee2e6;border-radius:4px;"></canvas>
                    </div>
                    <div class="mt-2">
                        <label class="form-label small mb-1">Crop Region (x, y, width, height)</label>
                        <div class="d-flex gap-1">
                            <input type="number" id="cropX" class="form-control form-control-sm" value="0" placeholder="X">
                            <input type="number" id="cropY" class="form-control form-control-sm" value="0" placeholder="Y">
                            <input type="number" id="cropW" class="form-control form-control-sm" value="200" placeholder="W">
                            <input type="number" id="cropH" class="form-control form-control-sm" value="200" placeholder="H">
                        </div>
                        <button type="button" class="btn btn-primary btn-sm mt-2" onclick="applyCrop()">Apply Crop</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <h6>Cropped Preview</h6>
                    <canvas id="cropCanvas" style="max-width:100%;border:1px solid #dee2e6;border-radius:4px;"></canvas>
                    <div class="mt-2">
                        <button type="button" class="btn btn-success btn-sm" id="btnUploadCropped" disabled>Upload Cropped Image</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="code-panel">
            <pre><code>// Load image to canvas, crop, then upload as Blob
var ctx = cropCanvas.getContext('2d');
ctx.drawImage(sourceCanvas, x, y, w, h, 0, 0, w, h);
cropCanvas.toBlob(function(blob) {
    var file = new File([blob], 'cropped.jpg', { type: 'image/jpeg' });
    uploader.addFiles([file]);
    uploader.startUpload();
}, 'image/jpeg', 0.9);</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var sourceCanvas = document.getElementById('sourceCanvas');
    var cropCanvas = document.getElementById('cropCanvas');
    var cropArea = document.getElementById('cropArea');
    var btnUploadCropped = document.getElementById('btnUploadCropped');
    var sourceImg = null;

    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('select', function(files) {
            var file = files[0].file || files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                sourceImg = new Image();
                sourceImg.onload = function() {
                    sourceCanvas.width = sourceImg.width;
                    sourceCanvas.height = sourceImg.height;
                    sourceCanvas.getContext('2d').drawImage(sourceImg, 0, 0);
                    document.getElementById('cropW').value = Math.min(200, sourceImg.width);
                    document.getElementById('cropH').value = Math.min(200, sourceImg.height);
                    cropArea.style.display = 'block';
                };
                sourceImg.src = e.target.result;
            };
            reader.readAsDataURL(file);
            return false;
        });
    }

    function applyCrop() {
        if (!sourceImg) return;
        var x = parseInt(document.getElementById('cropX').value) || 0;
        var y = parseInt(document.getElementById('cropY').value) || 0;
        var w = parseInt(document.getElementById('cropW').value) || 200;
        var h = parseInt(document.getElementById('cropH').value) || 200;
        cropCanvas.width = w;
        cropCanvas.height = h;
        cropCanvas.getContext('2d').drawImage(sourceImg, x, y, w, h, 0, 0, w, h);
        btnUploadCropped.disabled = false;
    }

    btnUploadCropped.addEventListener('click', function() {
        cropCanvas.toBlob(function(blob) {
            var file = new File([blob], 'cropped.jpg', { type: 'image/jpeg' });
            if (uploader) {
                uploader.addFiles([file]);
                uploader.startUpload();
            }
            btnUploadCropped.disabled = true;
            btnUploadCropped.textContent = 'Uploading...';
        }, 'image/jpeg', 0.9);
    });
</script>
</asp:Content>
