<!doctypehtml><!-- Image Cropper By Fullintro - https://fullintro.com --><html lang=en><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><title>Image Cropper</title><link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap"rel=stylesheet><link href=https://unpkg.com/cropperjs/dist/cropper.min.css rel=stylesheet><script src=https://unpkg.com/cropperjs></script><style>*{padding:0;margin:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{background-color:#fff}.main{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1em}.wrapper{text-align:center;width:min(90%,800px);background-color:#f0f0f0;border:6px solid #bfbfbf;padding:2em 3em;border-radius:10px;transition:box-shadow .3s ease-in-out}.wrapper.drag-over{box-shadow:0 0 20px rgba(0,0,0,.3)}h1{font-size:40px;color:#5a5a5a}p{color:#5a5a5a;font-size:16px}input[type=file]{display:none}label{display:block;background-color:#1cab26;color:#fff;font-size:16px;text-align:center;width:250px;padding:16px 0;border-radius:.3em;margin:16px auto;cursor:pointer}.container{margin-top:20px;text-align:center}.crop-container{display:none;margin-top:20px;position:relative}img{max-width:100%;height:auto;display:block;margin:0 auto}.warning{color:red;font-size:16px;margin-top:10px}.aspect-ratio-buttons{margin-top:20px;display:none}.aspect-ratio-button{background-color:#444;color:#fff;border:1px solid #444;padding:10px 20px;font-size:16px;cursor:pointer;margin:5px;border-radius:5px;transition:background-color .3s}.aspect-ratio-button:hover{background-color:#1cab26;color:#fff;border:1px solid #1cab26}.active-aspect-ratio{background-color:#1cab26;color:#fff;border:1px solid #1cab26}button{background-color:#1cab26;color:#fff;border:none;padding:.5em 1em;font-size:1em;cursor:pointer;border-radius:.3em;margin-top:1em;transition:background .3s}button:hover{background-color:#1cab26;color:#fff}.crop-button-container{margin-top:20px;display:none}</style><div class=main><div class=wrapper id=drop-zone><p>Drag and drop an image here or use the upload button below.</p><input accept=image/* id=file-input type=file> <label for=file-input>Upload Image</label><div class=container><div class=crop-container id=crop-container><img alt="Image for cropping"id=image src=""></div></div><div class=aspect-ratio-buttons id=aspect-ratio-buttons><button class=aspect-ratio-button data-ratio=free>Freeform</button> <button class=aspect-ratio-button data-ratio=1>1:1</button> <button class=aspect-ratio-button data-ratio=2:3>2:3</button> <button class=aspect-ratio-button data-ratio=3:2>3:2</button> <button class=aspect-ratio-button data-ratio=3:4>3:4</button> <button class=aspect-ratio-button data-ratio=4:3>4:3</button> <button class=aspect-ratio-button data-ratio=4:5>4:5</button> <button class=aspect-ratio-button data-ratio=5:4>5:4</button> <button class=aspect-ratio-button data-ratio=9:16>9:16</button> <button class=aspect-ratio-button data-ratio=16:9>16:9</button></div><div class=crop-button-container id=crop-button-container><button id=crop-button>Download</button></div><p class=warning id=warning-message style=display:none>Please upload a supported image format (JPG, PNG, or WEBP).<p class=warning id=multiple-warning style=display:none>You can only upload one image at a time.</div></div><script>const fileInput=document.getElementById("file-input");const dropZone=document.getElementById("drop-zone");const cropContainer=document.getElementById("crop-container");const imageElement=document.getElementById("image");const cropButton=document.getElementById("crop-button");const warningMessage=document.getElementById("warning-message");const multipleWarningMessage=document.getElementById("multiple-warning");const aspectRatioButtons=document.querySelectorAll(".aspect-ratio-button");const aspectRatioButtonsContainer=document.getElementById("aspect-ratio-buttons");const cropButtonContainer=document.getElementById("crop-button-container");let cropper;let originalFileName="";const allowedTypes=["image/jpeg","image/png","image/webp"];const aspectRatios={"free":NaN,"1":1,"2:3":2/3,"3:2":3/2,"3:4":3/4,"4:3":4/3,"4:5":4/5,"5:4":5/4,"9:16":9/16,"16:9":16/9};dropZone.addEventListener("dragover",(event)=>{event.preventDefault();dropZone.classList.add("drag-over")});dropZone.addEventListener("dragleave",()=>{dropZone.classList.remove("drag-over")});dropZone.addEventListener("drop",(event)=>{event.preventDefault();dropZone.classList.remove("drag-over");const files=event.dataTransfer.files;if(files.length>1){multipleWarningMessage.style.display="block";warningMessage.style.display="none";cropContainer.style.display="none";aspectRatioButtonsContainer.style.display="none";cropButtonContainer.style.display="none";return}else{multipleWarningMessage.style.display="none"}
const file=files[0];handleFile(file)});fileInput.addEventListener("change",()=>{const file=fileInput.files[0];handleFile(file)});aspectRatioButtons.forEach(button=>{button.addEventListener("click",()=>{aspectRatioButtons.forEach(btn=>btn.classList.remove("active-aspect-ratio"));button.classList.add("active-aspect-ratio");const ratio=aspectRatios[button.dataset.ratio];cropper.setAspectRatio(ratio)})});function handleFile(file){if(!allowedTypes.includes(file.type)){warningMessage.style.display="block";multipleWarningMessage.style.display="none";cropContainer.style.display="none";aspectRatioButtonsContainer.style.display="none";cropButtonContainer.style.display="none";return}
warningMessage.style.display="none";multipleWarningMessage.style.display="none";originalFileName=file.name.replace(/\.[^/.]+$/,"");cropContainer.style.display="block";aspectRatioButtonsContainer.style.display="block";cropButtonContainer.style.display="block";if(cropper){cropper.destroy()}
const reader=new FileReader();reader.onload=()=>{imageElement.src=reader.result;cropper=new Cropper(imageElement,{aspectRatio:NaN,viewMode:1,})};reader.readAsDataURL(file)}
cropButton.addEventListener("click",()=>{if(!cropper)return;const croppedCanvas=cropper.getCroppedCanvas();if(croppedCanvas){const croppedImageUrl=croppedCanvas.toDataURL("image/jpeg",1);const downloadLink=document.createElement("a");downloadLink.href=croppedImageUrl;downloadLink.download=`${originalFileName}.jpg`;downloadLink.click()}});</script><script>document.addEventListener('contextmenu',function(event){event.preventDefault()});</script><script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script></body></html>