{"id":1035,"date":"2026-09-06T14:38:58","date_gmt":"2026-09-06T14:38:58","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=1035"},"modified":"2026-09-06T15:59:02","modified_gmt":"2026-09-06T15:59:02","slug":"image-cropper","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/image-cropper\/","title":{"rendered":"Image Cropper"},"content":{"rendered":"\n<div id=\"wp-auto-cropper-wrapper\">\n<style>\n#wp-auto-cropper-wrapper{all:initial;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;color:#1e293b;box-sizing:border-box;display:block;width:100%;margin:0;padding:16px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;overflow-x:hidden}\n#wp-auto-cropper-wrapper *,#wp-auto-cropper-wrapper *::before,#wp-auto-cropper-wrapper *::after{box-sizing:border-box}\n#wp-auto-cropper-wrapper .ac-container{max-width:1320px;margin:0 auto;width:100%}\n#wp-auto-cropper-wrapper .ac-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid #e2e8f0;padding-bottom:12px;flex-wrap:wrap;gap:12px}\n#wp-auto-cropper-wrapper .ac-title{font-size:22px;font-weight:700;color:#0f172a;margin:0}\n#wp-auto-cropper-wrapper .ac-subtitle{font-size:13px;color:#64748b;margin:4px 0 0 0}\n#wp-auto-cropper-wrapper .ac-theme-toggle{background:#e2e8f0;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;color:#334155;transition:background .2s}\n#wp-auto-cropper-wrapper .ac-theme-toggle:hover{background:#cbd5e1}\n#wp-auto-cropper-wrapper .ac-main-grid{display:grid;grid-template-columns:360px 1fr;gap:20px;align-items:start}\n@media(max-width:1024px){#wp-auto-cropper-wrapper .ac-main-grid{grid-template-columns:1fr}}\n#wp-auto-cropper-wrapper .ac-card{background:#fff;border-radius:10px;border:1px solid #e2e8f0;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:16px;width:100%;overflow:hidden}\n#wp-auto-cropper-wrapper .ac-card:last-child{margin-bottom:0}\n#wp-auto-cropper-wrapper .ac-card-title{font-size:14px;font-weight:600;color:#334155;margin:0 0 12px 0;display:flex;align-items:center;justify-content:space-between}\n#wp-auto-cropper-wrapper .ac-upload-zone{border:2px dashed #cbd5e1;border-radius:8px;padding:24px 16px;text-align:center;background:#f8fafc;cursor:pointer;transition:all .2s}\n#wp-auto-cropper-wrapper .ac-upload-zone.dragover{border-color:#3b82f6;background:#eff6ff}\n#wp-auto-cropper-wrapper .ac-upload-zone p{margin:8px 0 0 0;font-size:13px;color:#475569}\n#wp-auto-cropper-wrapper .ac-upload-zone span{font-size:11px;color:#94a3b8}\n#wp-auto-cropper-wrapper .ac-btn{background:#3b82f6;color:#fff;border:none;padding:8px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s,transform .1s;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap}\n#wp-auto-cropper-wrapper .ac-btn:hover{background:#2563eb}\n#wp-auto-cropper-wrapper .ac-btn:active{transform:scale(.98)}\n#wp-auto-cropper-wrapper .ac-btn:disabled{opacity:.6;cursor:not-allowed}\n#wp-auto-cropper-wrapper .ac-btn-secondary{background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}\n#wp-auto-cropper-wrapper .ac-btn-secondary:hover{background:#e2e8f0}\n#wp-auto-cropper-wrapper .ac-btn-danger{background:#ef4444;color:#fff}\n#wp-auto-cropper-wrapper .ac-btn-danger:hover{background:#dc2626}\n#wp-auto-cropper-wrapper .ac-btn-group{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}\n#wp-auto-cropper-wrapper .ac-form-group{margin-bottom:12px}\n#wp-auto-cropper-wrapper .ac-form-group:last-child{margin-bottom:0}\n#wp-auto-cropper-wrapper label{display:block;font-size:12px;font-weight:500;color:#475569;margin-bottom:4px}\n#wp-auto-cropper-wrapper select,#wp-auto-cropper-wrapper input[type=range],#wp-auto-cropper-wrapper input[type=number],#wp-auto-cropper-wrapper input[type=color]{width:100%;padding:6px 8px;border-radius:6px;border:1px solid #cbd5e1;font-size:13px;background:#fff;color:#1e293b}\n#wp-auto-cropper-wrapper .ac-range-row{display:flex;align-items:center;gap:10px}\n#wp-auto-cropper-wrapper .ac-range-row input[type=range]{flex:1}\n#wp-auto-cropper-wrapper .ac-range-row span{font-size:12px;font-weight:600;color:#475569;min-width:32px;text-align:right}\n#wp-auto-cropper-wrapper .ac-preview-area{position:relative;background:#e2e8f0;border-radius:0;overflow:auto;display:flex;align-items:center;justify-content:center;min-height:420px;max-height:70vh;border:none;padding:16px;touch-action:none}\n#wp-auto-cropper-wrapper .ac-canvas-wrapper{position:relative;display:inline-block;box-shadow:0 4px 12px rgba(0,0,0,.15);line-height:0;user-select:none;-webkit-user-select:none;touch-action:none}\n#wp-auto-cropper-wrapper canvas{display:block;max-width:none;height:auto;image-rendering:auto}\n#wp-auto-cropper-wrapper .ac-crop-box{position:absolute;border:2px solid #3b82f6;background:rgba(59,130,246,.12);box-sizing:border-box;cursor:move;touch-action:none;z-index:5}\n#wp-auto-cropper-wrapper .ac-handle{position:absolute;width:14px;height:14px;background:#fff;border:2px solid #3b82f6;border-radius:50%;z-index:10;touch-action:none}\n#wp-auto-cropper-wrapper .ac-handle-tl{top:-7px;left:-7px;cursor:nwse-resize}\n#wp-auto-cropper-wrapper .ac-handle-tr{top:-7px;right:-7px;cursor:nesw-resize}\n#wp-auto-cropper-wrapper .ac-handle-bl{bottom:-7px;left:-7px;cursor:nesw-resize}\n#wp-auto-cropper-wrapper .ac-handle-br{bottom:-7px;right:-7px;cursor:nwse-resize}\n#wp-auto-cropper-wrapper .ac-handle-t{top:-7px;left:calc(50% - 7px);cursor:ns-resize}\n#wp-auto-cropper-wrapper .ac-handle-b{bottom:-7px;left:calc(50% - 7px);cursor:ns-resize}\n#wp-auto-cropper-wrapper .ac-handle-l{top:calc(50% - 7px);left:-7px;cursor:ew-resize}\n#wp-auto-cropper-wrapper .ac-handle-r{top:calc(50% - 7px);right:-7px;cursor:ew-resize}\n#wp-auto-cropper-wrapper .ac-crop-dimensions{position:absolute;bottom:-26px;left:0;background:rgba(15,23,42,.9);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;white-space:nowrap;pointer-events:none}\n#wp-auto-cropper-wrapper .ac-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#fff;border-bottom:1px solid #e2e8f0;border-top-left-radius:10px;border-top-right-radius:10px;flex-wrap:wrap;gap:8px}\n#wp-auto-cropper-wrapper .ac-toolbar-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}\n#wp-auto-cropper-wrapper .ac-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:12px}\n#wp-auto-cropper-wrapper .ac-stat-item{background:#f8fafc;padding:8px;border-radius:6px;border:1px solid #e2e8f0}\n#wp-auto-cropper-wrapper .ac-stat-label{color:#64748b;font-size:11px;margin-bottom:2px}\n#wp-auto-cropper-wrapper .ac-stat-value{font-weight:600;color:#0f172a}\n#wp-auto-cropper-wrapper .ac-tabs{display:flex;border-bottom:1px solid #e2e8f0;margin-bottom:12px;gap:4px;overflow-x:auto}\n#wp-auto-cropper-wrapper .ac-tab{padding:6px 10px;font-size:12px;font-weight:600;color:#64748b;background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}\n#wp-auto-cropper-wrapper .ac-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}\n#wp-auto-cropper-wrapper .ac-tab-content{display:none}\n#wp-auto-cropper-wrapper .ac-tab-content.active{display:block}\n#wp-auto-cropper-wrapper .ac-guide-section{margin-top:24px;background:#fff;border-radius:10px;border:1px solid #e2e8f0;padding:20px}\n#wp-auto-cropper-wrapper .ac-guide-section h3{font-size:16px;font-weight:700;color:#0f172a;margin-top:0;margin-bottom:12px}\n#wp-auto-cropper-wrapper .ac-guide-section p,#wp-auto-cropper-wrapper .ac-guide-section li{font-size:13px;color:#475569;line-height:1.5}\n#wp-auto-cropper-wrapper .ac-privacy{text-align:center;font-size:11px;color:#64748b;margin-top:16px}\n#wp-auto-cropper-wrapper .ac-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;padding:8px 12px;border-radius:6px;font-size:13px;margin-top:10px;display:none}\n#wp-auto-cropper-wrapper.dark{background:#0f172a;color:#f8fafc;border-color:#334155}\n#wp-auto-cropper-wrapper.dark .ac-card,#wp-auto-cropper-wrapper.dark .ac-guide-section,#wp-auto-cropper-wrapper.dark .ac-toolbar{background:#1e293b;border-color:#334155;color:#f8fafc}\n#wp-auto-cropper-wrapper.dark .ac-title,#wp-auto-cropper-wrapper.dark .ac-card-title,#wp-auto-cropper-wrapper.dark .ac-guide-section h3,#wp-auto-cropper-wrapper.dark .ac-stat-value{color:#f8fafc}\n#wp-auto-cropper-wrapper.dark .ac-subtitle,#wp-auto-cropper-wrapper.dark label,#wp-auto-cropper-wrapper.dark .ac-upload-zone p,#wp-auto-cropper-wrapper.dark .ac-stat-label,#wp-auto-cropper-wrapper.dark .ac-guide-section p,#wp-auto-cropper-wrapper.dark .ac-guide-section li{color:#94a3b8}\n#wp-auto-cropper-wrapper.dark .ac-upload-zone{background:#0f172a;border-color:#334155}\n#wp-auto-cropper-wrapper.dark select,#wp-auto-cropper-wrapper.dark input[type=range],#wp-auto-cropper-wrapper.dark input[type=number],#wp-auto-cropper-wrapper.dark input[type=color]{background:#0f172a;border-color:#334155;color:#f8fafc}\n#wp-auto-cropper-wrapper.dark .ac-stat-item{background:#0f172a;border-color:#334155}\n#wp-auto-cropper-wrapper.dark .ac-btn-secondary{background:#334155;color:#f8fafc;border-color:#475569}\n#wp-auto-cropper-wrapper.dark .ac-btn-secondary:hover{background:#475569}\n#wp-auto-cropper-wrapper.dark .ac-preview-area{background:#0f172a}\n#wp-auto-cropper-wrapper.dark .ac-error{background:#450a0a;color:#fecaca;border-color:#7f1d1d}\n@media(max-width:640px){#wp-auto-cropper-wrapper{padding:10px}#wp-auto-cropper-wrapper .ac-preview-area{min-height:280px;max-height:55vh;padding:10px}#wp-auto-cropper-wrapper .ac-handle{width:18px;height:18px}#wp-auto-cropper-wrapper .ac-handle-tl{top:-9px;left:-9px}#wp-auto-cropper-wrapper .ac-handle-tr{top:-9px;right:-9px}#wp-auto-cropper-wrapper .ac-handle-bl{bottom:-9px;left:-9px}#wp-auto-cropper-wrapper .ac-handle-br{bottom:-9px;right:-9px}#wp-auto-cropper-wrapper .ac-handle-t{top:-9px;left:calc(50% - 9px)}#wp-auto-cropper-wrapper .ac-handle-b{bottom:-9px;left:calc(50% - 9px)}#wp-auto-cropper-wrapper .ac-handle-l{top:calc(50% - 9px);left:-9px}#wp-auto-cropper-wrapper .ac-handle-r{top:calc(50% - 9px);right:-9px}}\n<\/style>\n<div class=\"ac-container\">\n<div class=\"ac-header\">\n<div>\n<h2 class=\"ac-title\">Auto Cropper \u2014 Screenshot &amp; Image<\/h2>\n<p class=\"ac-subtitle\">Professional browser-based image cropping and pixel analysis tool<\/p>\n<\/div>\n<button type=\"button\" class=\"ac-theme-toggle\" id=\"acThemeToggle\">Dark Mode<\/button>\n<\/div>\n<div class=\"ac-main-grid\">\n<div class=\"ac-sidebar\">\n<div class=\"ac-card\">\n<h3 class=\"ac-card-title\">Upload Image<\/h3>\n<div class=\"ac-upload-zone\" id=\"acDropZone\">\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#3b82f6\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"17 8 12 3 7 8\"><\/polyline><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"><\/line><\/svg>\n<p>Drag &amp; Drop image here or <strong>Browse<\/strong><\/p>\n<span>JPG, PNG, WEBP, GIF, BMP<\/span>\n<input type=\"file\" id=\"acFileInput\" accept=\"image\/jpeg,image\/png,image\/webp,image\/gif,image\/bmp,image\/*\" style=\"display:none\">\n<\/div>\n<div class=\"ac-error\" id=\"acErrorMsg\"><\/div>\n<div class=\"ac-btn-group\" style=\"margin-top:10px;display:none\" id=\"acImageActions\">\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acReplaceImage\" style=\"flex:1\">Replace<\/button>\n<button type=\"button\" class=\"ac-btn ac-btn-danger\" id=\"acRemoveImage\" style=\"flex:1\">Remove<\/button>\n<\/div>\n<\/div>\n<div class=\"ac-card\" id=\"acControlsCard\" style=\"opacity:.5;pointer-events:none\">\n<div class=\"ac-tabs\">\n<button type=\"button\" class=\"ac-tab active\" data-tab=\"crop\">Crop &amp; Auto<\/button>\n<button type=\"button\" class=\"ac-tab\" data-tab=\"adjust\">Transform<\/button>\n<button type=\"button\" class=\"ac-tab\" data-tab=\"info\">Info<\/button>\n<\/div>\n<div class=\"ac-tab-content active\" id=\"tab-crop\">\n<div class=\"ac-form-group\">\n<label>Smart Detection Mode<\/label>\n<select id=\"acScreenshotMode\">\n<option value=\"balanced\">Balanced (Recommended)<\/option>\n<option value=\"conservative\">Conservative<\/option>\n<option value=\"aggressive\">Aggressive<\/option>\n<\/select>\n<\/div>\n<div class=\"ac-form-group\">\n<label>Background Reference<\/label>\n<select id=\"acBgMode\">\n<option value=\"auto\">Auto Detect Edge<\/option>\n<option value=\"white\">White (#FFFFFF)<\/option>\n<option value=\"transparent\">Transparent \/ Alpha<\/option>\n<option value=\"black\">Black (#000000)<\/option>\n<option value=\"custom\">Custom Color<\/option>\n<\/select>\n<\/div>\n<div class=\"ac-form-group\" id=\"acCustomColorGroup\" style=\"display:none\">\n<label>Background Color<\/label>\n<input type=\"color\" id=\"acCustomBgColor\" value=\"#ffffff\">\n<\/div>\n<div class=\"ac-form-group\">\n<label>Tolerance Threshold<\/label>\n<div class=\"ac-range-row\">\n<input type=\"range\" id=\"acTolerance\" min=\"0\" max=\"100\" value=\"15\">\n<span id=\"acToleranceVal\">15<\/span>\n<\/div>\n<\/div>\n<div class=\"ac-btn-group\">\n<button type=\"button\" class=\"ac-btn\" id=\"acRunAutoCrop\">Run Auto Crop<\/button>\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acResetCrop\">Reset Crop<\/button>\n<\/div>\n<hr style=\"border:0;border-top:1px solid #e2e8f0;margin:12px 0\">\n<div class=\"ac-form-group\">\n<label>Aspect Ratio<\/label>\n<select id=\"acAspectRatio\">\n<option value=\"free\">Free<\/option>\n<option value=\"1:1\">1:1 Square<\/option>\n<option value=\"4:3\">4:3 Standard<\/option>\n<option value=\"3:4\">3:4 Portrait<\/option>\n<option value=\"16:9\">16:9 Widescreen<\/option>\n<option value=\"9:16\">9:16 Story<\/option>\n<option value=\"3:2\">3:2 Photo<\/option>\n<option value=\"2:3\">2:3 Portrait<\/option>\n<\/select>\n<\/div>\n<\/div>\n<div class=\"ac-tab-content\" id=\"tab-adjust\">\n<div class=\"ac-form-group\">\n<label>Rotation &amp; Flip<\/label>\n<div class=\"ac-btn-group\">\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acRotateLeft\">Rotate \u21b6<\/button>\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acRotateRight\">Rotate \u21b7<\/button>\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acFlipH\">Flip H<\/button>\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acFlipV\">Flip V<\/button>\n<\/div>\n<\/div>\n<div class=\"ac-form-group\" style=\"margin-top:10px\">\n<label>Brightness: <span id=\"acBrightVal\">0<\/span><\/label>\n<input type=\"range\" id=\"acBrightness\" min=\"-100\" max=\"100\" value=\"0\">\n<\/div>\n<div class=\"ac-form-group\">\n<label>Contrast: <span id=\"acContrastVal\">0<\/span><\/label>\n<input type=\"range\" id=\"acContrast\" min=\"-100\" max=\"100\" value=\"0\">\n<\/div>\n<div class=\"ac-form-group\">\n<label>Saturation: <span id=\"acSatVal\">0<\/span><\/label>\n<input type=\"range\" id=\"acSaturation\" min=\"-100\" max=\"100\" value=\"0\">\n<\/div>\n<div class=\"ac-form-group\">\n<label style=\"display:flex;align-items:center;gap:6px;cursor:pointer\">\n<input type=\"checkbox\" id=\"acGrayscale\" style=\"width:auto\"> Grayscale Filter\n<\/label>\n<\/div>\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acResetAdjustments\" style=\"width:100%;margin-top:4px\">Reset Adjustments<\/button>\n<\/div>\n<div class=\"ac-tab-content\" id=\"tab-info\">\n<div class=\"ac-stats-grid\">\n<div class=\"ac-stat-item\"><div class=\"ac-stat-label\">Original Width<\/div><div class=\"ac-stat-value\" id=\"acStatOrigW\">&#8211;<\/div><\/div>\n<div class=\"ac-stat-item\"><div class=\"ac-stat-label\">Original Height<\/div><div class=\"ac-stat-value\" id=\"acStatOrigH\">&#8211;<\/div><\/div>\n<div class=\"ac-stat-item\"><div class=\"ac-stat-label\">Cropped Width<\/div><div class=\"ac-stat-value\" id=\"acStatCropW\">&#8211;<\/div><\/div>\n<div class=\"ac-stat-item\"><div class=\"ac-stat-label\">Cropped Height<\/div><div class=\"ac-stat-value\" id=\"acStatCropH\">&#8211;<\/div><\/div>\n<div class=\"ac-stat-item\"><div class=\"ac-stat-label\">File Size<\/div><div class=\"ac-stat-value\" id=\"acStatSize\">&#8211;<\/div><\/div>\n<div class=\"ac-stat-item\"><div class=\"ac-stat-label\">Reduction<\/div><div class=\"ac-stat-value\" id=\"acStatPct\">&#8211;<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"ac-workspace\">\n<div class=\"ac-card\" style=\"padding:0;overflow:hidden\">\n<div class=\"ac-toolbar\">\n<div class=\"ac-toolbar-group\">\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acZoomIn\">Zoom +<\/button>\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acZoomOut\">Zoom &#8211;<\/button>\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acZoomFit\">Fit<\/button>\n<span id=\"acZoomLevel\" style=\"font-size:12px;font-weight:500;color:#64748b\">100%<\/span>\n<\/div>\n<div class=\"ac-toolbar-group\">\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acUndo\" disabled>Undo<\/button>\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acRedo\" disabled>Redo<\/button>\n<\/div>\n<\/div>\n<div class=\"ac-preview-area\" id=\"acPreviewArea\">\n<div class=\"ac-canvas-wrapper\" id=\"acCanvasWrapper\" style=\"display:none\">\n<canvas id=\"acCanvas\"><\/canvas>\n<div class=\"ac-crop-box\" id=\"acCropBox\">\n<div class=\"ac-handle ac-handle-tl\" data-handle=\"tl\"><\/div>\n<div class=\"ac-handle ac-handle-tr\" data-handle=\"tr\"><\/div>\n<div class=\"ac-handle ac-handle-bl\" data-handle=\"bl\"><\/div>\n<div class=\"ac-handle ac-handle-br\" data-handle=\"br\"><\/div>\n<div class=\"ac-handle ac-handle-t\" data-handle=\"t\"><\/div>\n<div class=\"ac-handle ac-handle-b\" data-handle=\"b\"><\/div>\n<div class=\"ac-handle ac-handle-l\" data-handle=\"l\"><\/div>\n<div class=\"ac-handle ac-handle-r\" data-handle=\"r\"><\/div>\n<div class=\"ac-crop-dimensions\" id=\"acCropDimDisplay\">0 \u00d7 0 px<\/div>\n<\/div>\n<\/div>\n<div id=\"acPlaceholderText\" style=\"color:#64748b;font-size:14px;text-align:center;pointer-events:none\">Please upload an image or screenshot to begin auto cropping<\/div>\n<\/div>\n<div class=\"ac-toolbar\" style=\"border-top:1px solid #e2e8f0;border-bottom:none;border-radius:0 0 10px 10px\">\n<div class=\"ac-toolbar-group\">\n<select id=\"acExportFormat\" style=\"width:auto;padding:5px 8px\">\n<option value=\"image\/png\">PNG<\/option>\n<option value=\"image\/jpeg\">JPG<\/option>\n<option value=\"image\/webp\">WEBP<\/option>\n<\/select>\n<select id=\"acExportQuality\" style=\"width:auto;padding:5px 8px\">\n<option value=\"1.0\">Maximum Quality<\/option>\n<option value=\"0.9\">High Quality<\/option>\n<option value=\"0.8\">Medium Quality<\/option>\n<option value=\"0.6\">Low Quality<\/option>\n<\/select>\n<\/div>\n<div class=\"ac-toolbar-group\">\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acCopyImage\">Copy<\/button>\n<button type=\"button\" class=\"ac-btn ac-btn-secondary\" id=\"acPrintImage\">Print<\/button>\n<button type=\"button\" class=\"ac-btn\" id=\"acDownloadBtn\">Download Cropped<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"ac-guide-section\">\n<h3>Auto Cropper for Screenshot &amp; Image<\/h3>\n<p>Automatically remove unnecessary empty borders and margins from screenshots and images. Upload an image, let the tool detect the meaningful content area, adjust the crop if needed, and download the result.<\/p>\n<\/div>\n<div class=\"ac-privacy\">Your image is processed locally in your browser and is not uploaded to a server.<\/div>\n<\/div>\n<script>\n(function(){\n'use strict';\nvar wrapper=document.getElementById('wp-auto-cropper-wrapper');\nif(!wrapper)return;\nvar fileInput=wrapper.querySelector('#acFileInput');\nvar dropZone=wrapper.querySelector('#acDropZone');\nvar imageActions=wrapper.querySelector('#acImageActions');\nvar replaceImageBtn=wrapper.querySelector('#acReplaceImage');\nvar removeImageBtn=wrapper.querySelector('#acRemoveImage');\nvar errorMsg=wrapper.querySelector('#acErrorMsg');\nvar canvas=wrapper.querySelector('#acCanvas');\nvar ctx=canvas.getContext('2d',{willReadFrequently:true});\nvar canvasWrapper=wrapper.querySelector('#acCanvasWrapper');\nvar cropBoxEl=wrapper.querySelector('#acCropBox');\nvar cropDimDisplay=wrapper.querySelector('#acCropDimDisplay');\nvar previewArea=wrapper.querySelector('#acPreviewArea');\nvar placeholderText=wrapper.querySelector('#acPlaceholderText');\nvar controlsCard=wrapper.querySelector('#acControlsCard');\nvar themeToggle=wrapper.querySelector('#acThemeToggle');\nvar screenshotModeSelect=wrapper.querySelector('#acScreenshotMode');\nvar bgModeSelect=wrapper.querySelector('#acBgMode');\nvar customColorGroup=wrapper.querySelector('#acCustomColorGroup');\nvar customBgColor=wrapper.querySelector('#acCustomBgColor');\nvar toleranceSlider=wrapper.querySelector('#acTolerance');\nvar toleranceVal=wrapper.querySelector('#acToleranceVal');\nvar runAutoCropBtn=wrapper.querySelector('#acRunAutoCrop');\nvar resetCropBtn=wrapper.querySelector('#acResetCrop');\nvar aspectRatioSelect=wrapper.querySelector('#acAspectRatio');\nvar rotateLeftBtn=wrapper.querySelector('#acRotateLeft');\nvar rotateRightBtn=wrapper.querySelector('#acRotateRight');\nvar flipHBtn=wrapper.querySelector('#acFlipH');\nvar flipVBtn=wrapper.querySelector('#acFlipV');\nvar brightSlider=wrapper.querySelector('#acBrightness');\nvar brightVal=wrapper.querySelector('#acBrightVal');\nvar contrastSlider=wrapper.querySelector('#acContrast');\nvar contrastVal=wrapper.querySelector('#acContrastVal');\nvar satSlider=wrapper.querySelector('#acSaturation');\nvar satVal=wrapper.querySelector('#acSatVal');\nvar grayscaleCheck=wrapper.querySelector('#acGrayscale');\nvar resetAdjBtn=wrapper.querySelector('#acResetAdjustments');\nvar zoomInBtn=wrapper.querySelector('#acZoomIn');\nvar zoomOutBtn=wrapper.querySelector('#acZoomOut');\nvar zoomFitBtn=wrapper.querySelector('#acZoomFit');\nvar zoomLevelDisplay=wrapper.querySelector('#acZoomLevel');\nvar undoBtn=wrapper.querySelector('#acUndo');\nvar redoBtn=wrapper.querySelector('#acRedo');\nvar exportFormat=wrapper.querySelector('#acExportFormat');\nvar exportQuality=wrapper.querySelector('#acExportQuality');\nvar copyImageBtn=wrapper.querySelector('#acCopyImage');\nvar printImageBtn=wrapper.querySelector('#acPrintImage');\nvar downloadBtn=wrapper.querySelector('#acDownloadBtn');\nvar statOrigW=wrapper.querySelector('#acStatOrigW');\nvar statOrigH=wrapper.querySelector('#acStatOrigH');\nvar statCropW=wrapper.querySelector('#acStatCropW');\nvar statCropH=wrapper.querySelector('#acStatCropH');\nvar statSize=wrapper.querySelector('#acStatSize');\nvar statPct=wrapper.querySelector('#acStatPct');\n\nvar originalImage=null;\nvar sourceCanvas=null;\nvar originalFileSize=0;\nvar currentFilename='cropped-image';\nvar zoomLevel=1;\nvar objectUrl=null;\nvar displayScale=1;\nvar imgState={rotation:0,flipH:false,flipV:false,brightness:0,contrast:0,saturation:0,grayscale:false};\nvar crop={x:0,y:0,w:100,h:100};\nvar history=[];\nvar historyIndex=-1;\nvar isInteracting=false;\nvar interactionType=null;\nvar activeHandle=null;\nvar startX=0,startY=0;\nvar startCrop={x:0,y:0,w:0,h:0};\nvar aspectRatio=null;\nvar naturalW=0,naturalH=0;\nvar renderRAF=null;\nvar MAX_CANVAS=8192;\n\nfunction showError(msg){\nerrorMsg.textContent=msg;\nerrorMsg.style.display='block';\nsetTimeout(function(){errorMsg.style.display='none';},6000);\n}\nfunction clearError(){errorMsg.style.display='none';}\nfunction revokeUrl(){if(objectUrl){URL.revokeObjectURL(objectUrl);objectUrl=null;}}\nfunction enableControls(enabled){\ncontrolsCard.style.opacity=enabled?'1':'0.5';\ncontrolsCard.style.pointerEvents=enabled?'auto':'none';\nimageActions.style.display=enabled?'flex':'none';\n}\nfunction formatBytes(bytes){\nif(bytes<1024)return bytes+' B';\nif(bytes<1048576)return(bytes\/1024).toFixed(1)+' KB';\nreturn(bytes\/1048576).toFixed(2)+' MB';\n}\nfunction pushHistory(){\nvar snap={crop:{x:crop.x,y:crop.y,w:crop.w,h:crop.h},imgState:{rotation:imgState.rotation,flipH:imgState.flipH,flipV:imgState.flipV,brightness:imgState.brightness,contrast:imgState.contrast,saturation:imgState.saturation,grayscale:imgState.grayscale},zoomLevel:zoomLevel};\nif(historyIndex<history.length-1)history=history.slice(0,historyIndex+1);\nhistory.push(snap);\nif(history.length>40)history.shift();\nhistoryIndex=history.length-1;\nupdateHistoryButtons();\n}\nfunction updateHistoryButtons(){\nundoBtn.disabled=historyIndex<=0;\nredoBtn.disabled=historyIndex>=history.length-1;\n}\nfunction applyHistory(snap){\ncrop={x:snap.crop.x,y:snap.crop.y,w:snap.crop.w,h:snap.crop.h};\nimgState={rotation:snap.imgState.rotation,flipH:snap.imgState.flipH,flipV:snap.imgState.flipV,brightness:snap.imgState.brightness,contrast:snap.imgState.contrast,saturation:snap.imgState.saturation,grayscale:snap.imgState.grayscale};\nzoomLevel=snap.zoomLevel;\nbrightSlider.value=imgState.brightness;brightVal.textContent=imgState.brightness;\ncontrastSlider.value=imgState.contrast;contrastVal.textContent=imgState.contrast;\nsatSlider.value=imgState.saturation;satVal.textContent=imgState.saturation;\ngrayscaleCheck.checked=imgState.grayscale;\nzoomLevelDisplay.textContent=Math.round(zoomLevel*100)+'%';\nrender();\n}\nfunction getTransformedDimensions(){\nvar rot=((imgState.rotation%360)+360)%360;\nif(rot===90||rot===270)return{w:naturalH,h:naturalW};\nreturn{w:naturalW,h:naturalH};\n}\nfunction buildSourceCanvas(){\nif(!originalImage)return null;\nvar dim=getTransformedDimensions();\nif(dim.w>MAX_CANVAS||dim.h>MAX_CANVAS){\nshowError('Image too large for browser canvas limits.');\nreturn null;\n}\nvar sc=document.createElement('canvas');\nsc.width=dim.w;sc.height=dim.h;\nvar sctx=sc.getContext('2d');\nsctx.save();\nsctx.translate(dim.w\/2,dim.h\/2);\nsctx.rotate((imgState.rotation*Math.PI)\/180);\nsctx.scale(imgState.flipH?-1:1,imgState.flipV?-1:1);\nsctx.drawImage(originalImage,-naturalW\/2,-naturalH\/2,naturalW,naturalH);\nsctx.restore();\nif(imgState.brightness!==0||imgState.contrast!==0||imgState.saturation!==0||imgState.grayscale){\nvar imageData=sctx.getImageData(0,0,sc.width,sc.height);\nvar data=imageData.data;\nvar b=imgState.brightness\/100;\nvar c=(imgState.contrast+100)\/100;\nvar s=(imgState.saturation+100)\/100;\nfor(var i=0;i<data.length;i+=4){\nvar r=data[i],g=data[i+1],bl=data[i+2];\nr=((r\/255-0.5)*c+0.5+b)*255;\ng=((g\/255-0.5)*c+0.5+b)*255;\nbl=((bl\/255-0.5)*c+0.5+b)*255;\nif(imgState.grayscale){\nvar gray=0.299*r+0.587*g+0.114*bl;\nr=g=bl=gray;\n}else if(s!==1){\nvar gray2=0.299*r+0.587*g+0.114*bl;\nr=gray2+(r-gray2)*s;\ng=gray2+(g-gray2)*s;\nbl=gray2+(bl-gray2)*s;\n}\ndata[i]=Math.max(0,Math.min(255,r));\ndata[i+1]=Math.max(0,Math.min(255,g));\ndata[i+2]=Math.max(0,Math.min(255,bl));\n}\nsctx.putImageData(imageData,0,0);\n}\nreturn sc;\n}\nfunction render(){\nif(!originalImage)return;\nif(renderRAF)cancelAnimationFrame(renderRAF);\nrenderRAF=requestAnimationFrame(function(){\nsourceCanvas=buildSourceCanvas();\nif(!sourceCanvas)return;\nvar dim=getTransformedDimensions();\nvar maxW=Math.max(180,previewArea.clientWidth-32);\nvar maxH=Math.max(180,previewArea.clientHeight-32);\nvar fitScale=Math.min(maxW\/dim.w,maxH\/dim.h,1);\ndisplayScale=fitScale*zoomLevel;\nvar dispW=Math.max(1,Math.round(dim.w*displayScale));\nvar dispH=Math.max(1,Math.round(dim.h*displayScale));\ncanvas.width=dispW;canvas.height=dispH;\nctx.clearRect(0,0,dispW,dispH);\nctx.imageSmoothingEnabled=true;\nctx.imageSmoothingQuality='high';\nctx.drawImage(sourceCanvas,0,0,dim.w,dim.h,0,0,dispW,dispH);\nupdateCropBoxUI();\nupdateStats();\ncanvasWrapper.style.display='inline-block';\nplaceholderText.style.display='none';\n});\n}\nfunction updateCropBoxUI(){\nvar left=crop.x*displayScale;\nvar top=crop.y*displayScale;\nvar width=crop.w*displayScale;\nvar height=crop.h*displayScale;\ncropBoxEl.style.left=left+'px';\ncropBoxEl.style.top=top+'px';\ncropBoxEl.style.width=Math.max(1,width)+'px';\ncropBoxEl.style.height=Math.max(1,height)+'px';\ncropDimDisplay.textContent=Math.round(crop.w)+' \u00d7 '+Math.round(crop.h)+' px';\n}\nfunction updateStats(){\nstatOrigW.textContent=naturalW+' px';\nstatOrigH.textContent=naturalH+' px';\nstatCropW.textContent=Math.round(crop.w)+' px';\nstatCropH.textContent=Math.round(crop.h)+' px';\nstatSize.textContent=formatBytes(originalFileSize);\nvar origArea=naturalW*naturalH;\nvar cropArea=crop.w*crop.h;\nvar pct=origArea>0?Math.round((1-cropArea\/origArea)*100):0;\nstatPct.textContent=pct+'%';\n}\nfunction clampCrop(){\nvar dim=getTransformedDimensions();\ncrop.w=Math.max(8,Math.min(crop.w,dim.w));\ncrop.h=Math.max(8,Math.min(crop.h,dim.h));\ncrop.x=Math.max(0,Math.min(crop.x,dim.w-crop.w));\ncrop.y=Math.max(0,Math.min(crop.y,dim.h-crop.h));\n}\nfunction setDefaultCrop(){\nvar dim=getTransformedDimensions();\nvar margin=Math.min(dim.w,dim.h)*0.05;\ncrop={x:margin,y:margin,w:dim.w-margin*2,h:dim.h-margin*2};\napplyAspectRatio();\n}\nfunction applyAspectRatio(){\nif(!aspectRatio)return;\nvar dim=getTransformedDimensions();\nvar centerX=crop.x+crop.w\/2;\nvar centerY=crop.y+crop.h\/2;\nvar newW=crop.w;\nvar newH=newW\/aspectRatio;\nif(newH>dim.h){newH=dim.h;newW=newH*aspectRatio;}\nif(newW>dim.w){newW=dim.w;newH=newW\/aspectRatio;}\ncrop.w=Math.max(8,newW);\ncrop.h=Math.max(8,newH);\ncrop.x=centerX-crop.w\/2;\ncrop.y=centerY-crop.h\/2;\nclampCrop();\n}\nfunction loadImage(file){\nclearError();\nif(!file||!file.type||file.type.indexOf('image\/')!==0){\nshowError('Please select a valid image file (JPG, PNG, WEBP, GIF, BMP).');\nreturn;\n}\nrevokeUrl();\noriginalFileSize=file.size||0;\ncurrentFilename=(file.name||'image').replace(\/\\.[^.]+$\/,'')||'cropped-image';\nobjectUrl=URL.createObjectURL(file);\nvar img=new Image();\nimg.onload=function(){\noriginalImage=img;\nnaturalW=img.naturalWidth;\nnaturalH=img.naturalHeight;\nif(naturalW<1||naturalH<1){\nshowError('Image could not be decoded or has invalid dimensions.');\nrevokeUrl();\nreturn;\n}\nif(naturalW>MAX_CANVAS||naturalH>MAX_CANVAS){\nshowError('Image exceeds browser canvas size limits ('+MAX_CANVAS+'px). Try a smaller image.');\n}\nimgState={rotation:0,flipH:false,flipV:false,brightness:0,contrast:0,saturation:0,grayscale:false};\nbrightSlider.value=0;brightVal.textContent='0';\ncontrastSlider.value=0;contrastVal.textContent='0';\nsatSlider.value=0;satVal.textContent='0';\ngrayscaleCheck.checked=false;\nzoomLevel=1;\nhistory=[];historyIndex=-1;\nsetDefaultCrop();\nenableControls(true);\nrender();\npushHistory();\nzoomLevelDisplay.textContent='100%';\n};\nimg.onerror=function(){\nshowError('Failed to load image. The file may be corrupted or unsupported.');\nrevokeUrl();\n};\nimg.src=objectUrl;\n}\nfunction removeImage(){\nrevokeUrl();\noriginalImage=null;\nsourceCanvas=null;\ncanvasWrapper.style.display='none';\nplaceholderText.style.display='block';\nenableControls(false);\nfileInput.value='';\nhistory=[];historyIndex=-1;\nupdateHistoryButtons();\nstatOrigW.textContent='-';statOrigH.textContent='-';\nstatCropW.textContent='-';statCropH.textContent='-';\nstatSize.textContent='-';statPct.textContent='-';\n}\nfunction colorDist(r1,g1,b1,r2,g2,b2){\nreturn Math.sqrt((r1-r2)*(r1-r2)+(g1-g2)*(g1-g2)+(b1-b2)*(b1-b2));\n}\nfunction detectContentBounds(mode,bgMode,tolerance){\nif(!sourceCanvas)sourceCanvas=buildSourceCanvas();\nif(!sourceCanvas)return null;\nvar fullW=sourceCanvas.width;\nvar fullH=sourceCanvas.height;\nvar maxAnalysis=1200;\nvar scale=Math.min(1,maxAnalysis\/Math.max(fullW,fullH));\nvar aw=Math.max(1,Math.round(fullW*scale));\nvar ah=Math.max(1,Math.round(fullH*scale));\nvar analysis=document.createElement('canvas');\nanalysis.width=aw;analysis.height=ah;\nvar actx=analysis.getContext('2d');\nactx.drawImage(sourceCanvas,0,0,fullW,fullH,0,0,aw,ah);\nvar imageData=actx.getImageData(0,0,aw,ah);\nvar data=imageData.data;\nvar refR=255,refG=255,refB=255,refA=255;\nif(bgMode==='black'){refR=0;refG=0;refB=0;}\nelse if(bgMode==='custom'){\nvar hex=customBgColor.value;\nrefR=parseInt(hex.slice(1,3),16)||0;\nrefG=parseInt(hex.slice(3,5),16)||0;\nrefB=parseInt(hex.slice(5,7),16)||0;\n}else if(bgMode==='auto'){\nvar samples=[];\nvar corners=[[0,0],[aw-1,0],[0,ah-1],[aw-1,ah-1],[Math.floor(aw\/2),0],[0,Math.floor(ah\/2)],[aw-1,Math.floor(ah\/2)],[Math.floor(aw\/2),ah-1]];\nfor(var ci=0;ci<corners.length;ci++){\nvar cx=corners[ci][0],cy=corners[ci][1];\nvar idx=(cy*aw+cx)*4;\nsamples.push([data[idx],data[idx+1],data[idx+2],data[idx+3]]);\n}\nrefR=Math.round(samples.reduce(function(a,s){return a+s[0];},0)\/samples.length);\nrefG=Math.round(samples.reduce(function(a,s){return a+s[1];},0)\/samples.length);\nrefB=Math.round(samples.reduce(function(a,s){return a+s[2];},0)\/samples.length);\nrefA=Math.round(samples.reduce(function(a,s){return a+s[3];},0)\/samples.length);\n}\nvar thresh=tolerance*2.55;\nif(mode==='conservative')thresh=Math.max(0,thresh-25);\nif(mode==='aggressive')thresh=Math.min(255,thresh+50);\nfunction isBg(i){\nvar r=data[i],g=data[i+1],b=data[i+2],a=data[i+3];\nif(bgMode==='transparent')return a<Math.max(5,thresh\/4);\nvar dist=colorDist(r,g,b,refR,refG,refB);\nreturn dist<=thresh&#038;&#038;(bgMode!=='auto'||Math.abs(a-refA)<=thresh*0.6+10);\n}\nvar top=0,bottom=ah-1,left=0,right=aw-1,found=false;\nfor(var y=0;y<ah;y++){\nfor(var x=0;x<aw;x++){if(!isBg((y*aw+x)*4)){top=y;found=true;break;}}\nif(found)break;\n}\nfound=false;\nfor(var y2=ah-1;y2>=0;y2--){\nfor(var x2=0;x2<aw;x2++){if(!isBg((y2*aw+x2)*4)){bottom=y2;found=true;break;}}\nif(found)break;\n}\nfound=false;\nfor(var x3=0;x3<aw;x3++){\nfor(var y3=top;y3<=bottom;y3++){if(!isBg((y3*aw+x3)*4)){left=x3;found=true;break;}}\nif(found)break;\n}\nfound=false;\nfor(var x4=aw-1;x4>=0;x4--){\nfor(var y4=top;y4<=bottom;y4++){if(!isBg((y4*aw+x4)*4)){right=x4;found=true;break;}}\nif(found)break;\n}\nif(right<=left||bottom<=top)return null;\nvar inv=1\/scale;\nreturn{\nx:Math.floor(left*inv),\ny:Math.floor(top*inv),\nw:Math.ceil((right-left+1)*inv),\nh:Math.ceil((bottom-top+1)*inv)\n};\n}\nfunction runAutoCrop(){\nif(!originalImage)return;\nvar bounds=detectContentBounds(screenshotModeSelect.value,bgModeSelect.value,parseInt(toleranceSlider.value,10));\nif(bounds){\nvar dim=getTransformedDimensions();\nbounds.w=Math.min(bounds.w,dim.w-bounds.x);\nbounds.h=Math.min(bounds.h,dim.h-bounds.y);\nif(bounds.w<8||bounds.h<8){\nshowError('Detected area too small. Try different tolerance or mode.');\nreturn;\n}\ncrop=bounds;\napplyAspectRatio();\nclampCrop();\nrender();\npushHistory();\n}else{\nshowError('Could not detect content bounds. Try adjusting tolerance or mode.');\n}\n}\nfunction getExportCanvas(){\nif(!sourceCanvas)sourceCanvas=buildSourceCanvas();\nif(!sourceCanvas)return null;\nvar out=document.createElement('canvas');\nvar sx=Math.max(0,Math.round(crop.x));\nvar sy=Math.max(0,Math.round(crop.y));\nvar sw=Math.max(1,Math.round(crop.w));\nvar sh=Math.max(1,Math.round(crop.h));\nvar dim=getTransformedDimensions();\nif(sx+sw>dim.w)sw=dim.w-sx;\nif(sy+sh>dim.h)sh=dim.h-sy;\nout.width=sw;out.height=sh;\nvar octx=out.getContext('2d');\nif(exportFormat.value==='image\/jpeg'){\noctx.fillStyle='#ffffff';\noctx.fillRect(0,0,sw,sh);\n}\noctx.drawImage(sourceCanvas,sx,sy,sw,sh,0,0,sw,sh);\nreturn out;\n}\nfunction downloadCropped(){\nvar out=getExportCanvas();\nif(!out){showError('No image to export.');return;}\nvar mime=exportFormat.value;\nvar quality=parseFloat(exportQuality.value)||1;\nvar ext=mime==='image\/png'?'png':(mime==='image\/webp'?'webp':'jpg');\nout.toBlob(function(blob){\nif(!blob){showError('Export failed.');return;}\nvar url=URL.createObjectURL(blob);\nvar a=document.createElement('a');\na.href=url;\na.download=currentFilename+'-cropped.'+ext;\ndocument.body.appendChild(a);\na.click();\ndocument.body.removeChild(a);\nsetTimeout(function(){URL.revokeObjectURL(url);},2500);\n},mime,quality);\n}\nfunction copyImage(){\nvar out=getExportCanvas();\nif(!out){showError('No image to copy.');return;}\nout.toBlob(function(blob){\nif(!blob){showError('Copy failed.');return;}\nif(navigator.clipboard&&navigator.clipboard.write&&window.ClipboardItem){\nnavigator.clipboard.write([new ClipboardItem({[blob.type]:blob})]).then(function(){\ncopyImageBtn.textContent='Copied!';\nsetTimeout(function(){copyImageBtn.textContent='Copy';},1600);\n}).catch(function(){showError('Clipboard write failed or permission denied.');});\n}else{\nshowError('Clipboard API not available in this browser\/context.');\n}\n},exportFormat.value,parseFloat(exportQuality.value)||1);\n}\nfunction printImage(){\nvar out=getExportCanvas();\nif(!out){showError('No image to print.');return;}\nvar dataUrl=out.toDataURL('image\/png');\nvar win=window.open('',' _blank');\nif(!win){showError('Popup blocked. Allow popups to print.');return;}\nwin.document.open();\nwin.document.write('<!DOCTYPE html><html><head><title>Print Cropped Image<\/title><style>html,body{margin:0;padding:0;background:#fff;height:100%;display:flex;align-items:center;justify-content:center}img{max-width:100%;max-height:100%;height:auto}<\/style><\/head><body><img decoding=\"async\" src=\"'+dataUrl+'\" alt=\"Cropped\"><\/body><\/html>');\nwin.document.close();\nsetTimeout(function(){try{win.focus();win.print();}catch(e){}},400);\n}\n\ndropZone.addEventListener('click',function(){fileInput.click();});\nreplaceImageBtn.addEventListener('click',function(){fileInput.click();});\nremoveImageBtn.addEventListener('click',removeImage);\nfileInput.addEventListener('change',function(e){\nif(e.target.files&&e.target.files[0])loadImage(e.target.files[0]);\n});\ndropZone.addEventListener('dragover',function(e){e.preventDefault();e.stopPropagation();dropZone.classList.add('dragover');});\ndropZone.addEventListener('dragleave',function(e){e.preventDefault();dropZone.classList.remove('dragover');});\ndropZone.addEventListener('drop',function(e){\ne.preventDefault();e.stopPropagation();\ndropZone.classList.remove('dragover');\nif(e.dataTransfer.files&&e.dataTransfer.files[0])loadImage(e.dataTransfer.files[0]);\n});\nthemeToggle.addEventListener('click',function(){\nwrapper.classList.toggle('dark');\nthemeToggle.textContent=wrapper.classList.contains('dark')?'Light Mode':'Dark Mode';\n});\nwrapper.querySelectorAll('.ac-tab').forEach(function(tab){\ntab.addEventListener('click',function(){\nwrapper.querySelectorAll('.ac-tab').forEach(function(t){t.classList.remove('active');});\nwrapper.querySelectorAll('.ac-tab-content').forEach(function(c){c.classList.remove('active');});\ntab.classList.add('active');\nvar target=wrapper.querySelector('#tab-'+tab.dataset.tab);\nif(target)target.classList.add('active');\n});\n});\nbgModeSelect.addEventListener('change',function(){\ncustomColorGroup.style.display=bgModeSelect.value==='custom'?'block':'none';\n});\ntoleranceSlider.addEventListener('input',function(){toleranceVal.textContent=toleranceSlider.value;});\nrunAutoCropBtn.addEventListener('click',runAutoCrop);\nresetCropBtn.addEventListener('click',function(){\nsetDefaultCrop();\nrender();\npushHistory();\n});\naspectRatioSelect.addEventListener('change',function(){\nvar val=aspectRatioSelect.value;\nif(val==='free')aspectRatio=null;\nelse{\nvar parts=val.split(':');\naspectRatio=parseFloat(parts[0])\/parseFloat(parts[1]);\n}\napplyAspectRatio();\nrender();\npushHistory();\n});\nrotateLeftBtn.addEventListener('click',function(){\nimgState.rotation=(imgState.rotation-90+360)%360;\nsetDefaultCrop();\nrender();\npushHistory();\n});\nrotateRightBtn.addEventListener('click',function(){\nimgState.rotation=(imgState.rotation+90)%360;\nsetDefaultCrop();\nrender();\npushHistory();\n});\nflipHBtn.addEventListener('click',function(){\nimgState.flipH=!imgState.flipH;\nrender();\npushHistory();\n});\nflipVBtn.addEventListener('click',function(){\nimgState.flipV=!imgState.flipV;\nrender();\npushHistory();\n});\nbrightSlider.addEventListener('input',function(){\nimgState.brightness=parseInt(brightSlider.value,10);\nbrightVal.textContent=imgState.brightness;\nrender();\n});\nbrightSlider.addEventListener('change',function(){pushHistory();});\ncontrastSlider.addEventListener('input',function(){\nimgState.contrast=parseInt(contrastSlider.value,10);\ncontrastVal.textContent=imgState.contrast;\nrender();\n});\ncontrastSlider.addEventListener('change',function(){pushHistory();});\nsatSlider.addEventListener('input',function(){\nimgState.saturation=parseInt(satSlider.value,10);\nsatVal.textContent=imgState.saturation;\nrender();\n});\nsatSlider.addEventListener('change',function(){pushHistory();});\ngrayscaleCheck.addEventListener('change',function(){\nimgState.grayscale=grayscaleCheck.checked;\nrender();\npushHistory();\n});\nresetAdjBtn.addEventListener('click',function(){\nimgState.brightness=0;imgState.contrast=0;imgState.saturation=0;imgState.grayscale=false;\nbrightSlider.value=0;brightVal.textContent='0';\ncontrastSlider.value=0;contrastVal.textContent='0';\nsatSlider.value=0;satVal.textContent='0';\ngrayscaleCheck.checked=false;\nrender();\npushHistory();\n});\nzoomInBtn.addEventListener('click',function(){\nzoomLevel=Math.min(5,+(zoomLevel+0.15).toFixed(2));\nzoomLevelDisplay.textContent=Math.round(zoomLevel*100)+'%';\nrender();\n});\nzoomOutBtn.addEventListener('click',function(){\nzoomLevel=Math.max(0.2,+(zoomLevel-0.15).toFixed(2));\nzoomLevelDisplay.textContent=Math.round(zoomLevel*100)+'%';\nrender();\n});\nzoomFitBtn.addEventListener('click',function(){\nzoomLevel=1;\nzoomLevelDisplay.textContent='100%';\nrender();\n});\nundoBtn.addEventListener('click',function(){\nif(historyIndex>0){historyIndex--;applyHistory(history[historyIndex]);updateHistoryButtons();}\n});\nredoBtn.addEventListener('click',function(){\nif(historyIndex<history.length-1){historyIndex++;applyHistory(history[historyIndex]);updateHistoryButtons();}\n});\ndownloadBtn.addEventListener('click',downloadCropped);\ncopyImageBtn.addEventListener('click',copyImage);\nprintImageBtn.addEventListener('click',printImage);\n\nfunction getPointerPos(e){\nvar rect=canvas.getBoundingClientRect();\nvar clientX=e.touches?e.touches[0].clientX:e.clientX;\nvar clientY=e.touches?e.touches[0].clientY:e.clientY;\nreturn{x:(clientX-rect.left)\/displayScale,y:(clientY-rect.top)\/displayScale};\n}\nfunction onPointerDown(e){\nif(!originalImage)return;\ne.preventDefault();\nvar target=e.target;\nvar pos=getPointerPos(e);\nstartX=pos.x;startY=pos.y;\nstartCrop={x:crop.x,y:crop.y,w:crop.w,h:crop.h};\nisInteracting=true;\nif(target.classList.contains('ac-handle')){\ninteractionType='resize';\nactiveHandle=target.dataset.handle;\n}else if(target===cropBoxEl||cropBoxEl.contains(target)){\ninteractionType='move';\nactiveHandle=null;\n}else{\nisInteracting=false;\n}\n}\nfunction onPointerMove(e){\nif(!isInteracting)return;\ne.preventDefault();\nvar pos=getPointerPos(e);\nvar dx=pos.x-startX;\nvar dy=pos.y-startY;\nvar dim=getTransformedDimensions();\nif(interactionType==='move'){\ncrop.x=startCrop.x+dx;\ncrop.y=startCrop.y+dy;\nclampCrop();\n}else if(interactionType==='resize'){\nvar nx=startCrop.x,ny=startCrop.y,nw=startCrop.w,nh=startCrop.h;\nif(activeHandle.indexOf('l')!==-1){nx=startCrop.x+dx;nw=startCrop.w-dx;}\nif(activeHandle.indexOf('r')!==-1){nw=startCrop.w+dx;}\nif(activeHandle.indexOf('t')!==-1){ny=startCrop.y+dy;nh=startCrop.h-dy;}\nif(activeHandle.indexOf('b')!==-1){nh=startCrop.h+dy;}\nif(aspectRatio){\nif(activeHandle==='l'||activeHandle==='r'){\nnh=nw\/aspectRatio;\nny=startCrop.y+(startCrop.h-nh)\/2;\n}else if(activeHandle==='t'||activeHandle==='b'){\nnw=nh*aspectRatio;\nnx=startCrop.x+(startCrop.w-nw)\/2;\n}else{\nif(Math.abs(dx)>=Math.abs(dy)){\nnh=nw\/aspectRatio;\nif(activeHandle.indexOf('t')!==-1)ny=startCrop.y+startCrop.h-nh;\n}else{\nnw=nh*aspectRatio;\nif(activeHandle.indexOf('l')!==-1)nx=startCrop.x+startCrop.w-nw;\n}\n}\n}\nif(nw<8){nw=8;if(activeHandle.indexOf('l')!==-1)nx=startCrop.x+startCrop.w-8;}\nif(nh<8){nh=8;if(activeHandle.indexOf('t')!==-1)ny=startCrop.y+startCrop.h-8;}\ncrop.x=nx;crop.y=ny;crop.w=nw;crop.h=nh;\nclampCrop();\n}\nupdateCropBoxUI();\nupdateStats();\n}\nfunction onPointerUp(){\nif(isInteracting){\nisInteracting=false;\ninteractionType=null;\nactiveHandle=null;\npushHistory();\n}\n}\ncropBoxEl.addEventListener('mousedown',onPointerDown);\ncropBoxEl.addEventListener('touchstart',onPointerDown,{passive:false});\nwrapper.querySelectorAll('.ac-handle').forEach(function(h){\nh.addEventListener('mousedown',onPointerDown);\nh.addEventListener('touchstart',onPointerDown,{passive:false});\n});\nwindow.addEventListener('mousemove',onPointerMove);\nwindow.addEventListener('touchmove',onPointerMove,{passive:false});\nwindow.addEventListener('mouseup',onPointerUp);\nwindow.addEventListener('touchend',onPointerUp);\npreviewArea.addEventListener('wheel',function(e){\nif(!originalImage)return;\ne.preventDefault();\nvar delta=e.deltaY>0?-0.08:0.08;\nzoomLevel=Math.max(0.2,Math.min(5,+(zoomLevel+delta).toFixed(2)));\nzoomLevelDisplay.textContent=Math.round(zoomLevel*100)+'%';\nrender();\n},{passive:false});\nvar resizeTimer=null;\nwindow.addEventListener('resize',function(){\nif(!originalImage)return;\nclearTimeout(resizeTimer);\nresizeTimer=setTimeout(function(){render();},120);\n});\ndocument.addEventListener('keydown',function(e){\nif(!originalImage)return;\nvar tag=(e.target&&e.target.tagName||'').toLowerCase();\nif(tag==='input'||tag==='textarea'||tag==='select'||(e.target&&e.target.isContentEditable))return;\nif((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='z'){\ne.preventDefault();\nif(e.shiftKey){if(historyIndex<history.length-1){historyIndex++;applyHistory(history[historyIndex]);updateHistoryButtons();}}\nelse{if(historyIndex>0){historyIndex--;applyHistory(history[historyIndex]);updateHistoryButtons();}}\n}\n});\nenableControls(false);\nupdateHistoryButtons();\n})();\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Auto Cropper \u2014 Screenshot &amp; Image Professional browser-based image cropping and pixel analysis tool Dark Mode Upload Image Drag &amp; Drop image here or Browse JPG, PNG, WEBP, GIF, BMP Replace Remove Crop &amp; Auto Transform Info Smart Detection Mode Balanced (Recommended)ConservativeAggressive Background Reference Auto Detect EdgeWhite (#FFFFFF)Transparent \/ AlphaBlack (#000000)Custom Color Background Color Tolerance [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1035","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/1035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=1035"}],"version-history":[{"count":8,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/1035\/revisions"}],"predecessor-version":[{"id":1047,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/1035\/revisions\/1047"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=1035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}