Image Resizer

Resize images without uploading to a server.

Configure inputs in pipeline.

Output will appear here.

For informational purposes only.

No data is stored or transmitted.

(function(){ const fileInput = document.querySelector('#file'); const wEl = document.querySelector('#w'); const hEl = document.querySelector('#h'); const fitEl = document.querySelector('#fit'); const fmtEl = document.querySelector('#fmt'); const preview = document.querySelector('#preview'); const download = document.querySelector('#download'); const toInt=(v)=> Math.max(0, parseInt(v||'0',10)||0); const render = (img)=>{ const targetW = toInt(wEl?.value); const targetH = toInt(hEl?.value); if(!targetW && !targetH){ if(preview){ preview.style.display='none'; } if(download){ download.style.display='none'; } return; } const srcW = img.naturalWidth; const srcH = img.naturalHeight; let outW = targetW || srcW; let outH = targetH || srcH; const fit = fitEl?.value || 'fit'; if(fit === 'fit'){ if(targetW && targetH){ const ratio = Math.min(targetW/srcW, targetH/srcH); outW = Math.round(srcW*ratio); outH = Math.round(srcH*ratio); } else if(targetW){ outH = Math.round(srcH * (targetW/srcW)); outW = targetW; } else if(targetH){ outW = Math.round(srcW * (targetH/srcH)); outH = targetH; } } const canvas = document.createElement('canvas'); canvas.width = outW; canvas.height = outH; const ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'; ctx.drawImage(img, 0, 0, outW, outH); const mime = fmtEl?.value || 'image/png'; const url = canvas.toDataURL(mime, 0.92); const ext = mime.includes('jpeg') ? 'jpg' : 'png'; if(preview){ preview.src = url; preview.style.display='block'; } if(download){ download.href = url; download.textContent = `Download resized.${ext}`; download.style.display='inline-block'; } }; const read = (file)=>{ if(!file){ return; } const reader = new FileReader(); reader.onload = (e)=> { const img = new Image(); img.onload = ()=> render(img); img.onerror = ()=>{ if(preview){ preview.style.display='none'; } if(download){ download.style.display='none'; } }; img.src = e.target.result; }; reader.readAsDataURL(file); }; document.getElementById('run-btn')?.addEventListener('click', ()=> read(fileInput?.files?.[0])); fileInput?.addEventListener('change', ()=> read(fileInput?.files?.[0])); [wEl, hEl, fitEl, fmtEl].forEach(el=> el?.addEventListener('change', ()=>{ const img = preview && preview.src ? preview : null; if(!img) return; const i = new Image(); i.onload = ()=> render(i); i.src = preview.src; })); })();