<!doctypehtml><!-- Image Upscaler By Fullintro - https://fullintro.com --><html lang=en><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><title>Image Upscaler</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:3px 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}.scale-buttons{margin-top:20px;display:none}.scale-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}.scale-button:hover{background-color:#1cab26;color:#fff;border:1px solid #1cab26}.active-scale{background-color:#764ba2;color:#fff}button{background-color:#764ba2;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:#5e3e7e}</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 upscaling"id=image src=""></div></div><div class=scale-buttons id=scale-buttons><button class=scale-button data-scale=2>2x</button> <button class=scale-button data-scale=3>3x</button> <button class=scale-button data-scale=4>4x</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 warningMessage=document.getElementById("warning-message");const multipleWarningMessage=document.getElementById("multiple-warning");const scaleButtons=document.querySelectorAll(".scale-button");const scaleButtonsContainer=document.getElementById("scale-buttons");let originalFileName="";let imgWidth,imgHeight;const allowedTypes=["image/jpeg","image/png","image/webp"];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";scaleButtonsContainer.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)});scaleButtons.forEach(button=>{button.addEventListener("click",()=>{const scaleFactor=parseInt(button.dataset.scale);upscaleImage(scaleFactor)})});function handleFile(file){if(!allowedTypes.includes(file.type)){warningMessage.style.display="block";multipleWarningMessage.style.display="none";cropContainer.style.display="none";scaleButtonsContainer.style.display="none";return}
warningMessage.style.display="none";multipleWarningMessage.style.display="none";originalFileName=file.name.replace(/\.[^/.]+$/,"");cropContainer.style.display="block";scaleButtonsContainer.style.display="block";const reader=new FileReader();reader.onload=()=>{imageElement.src=reader.result;imageElement.onload=()=>{imgWidth=imageElement.naturalWidth;imgHeight=imageElement.naturalHeight}};reader.readAsDataURL(file)}
function upscaleImage(scaleFactor){const canvas=document.createElement("canvas");const ctx=canvas.getContext("2d");canvas.width=imgWidth*scaleFactor;canvas.height=imgHeight*scaleFactor;ctx.drawImage(imageElement,0,0,canvas.width,canvas.height);const upscaledImageUrl=canvas.toDataURL("image/jpeg",1);const downloadLink=document.createElement("a");downloadLink.href=upscaledImageUrl;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>