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