<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Image Resizer Tool</title><style>body{font-family:Arial,sans-serif;max-width:600px;margin:0 auto;padding:20px}label{display:block;margin-top:10px}input,select,button{margin-top:5px}#preview{max-width:100%;margin-top:20px}#download{display:none;margin-top:20px}</style></head><body><h1>Image Resizer Tool</h1><label for="imageInput">Select Image:</label><input type="file" id="imageInput" accept="image/*"><label for="width">Width:</label><input type="number" id="width" min="1" placeholder="Enter width"><label for="height">Height:</label><input type="number" id="height" min="1" placeholder="Enter height"><label for="unit">Unit:</label><select id="unit"><option value="cm">cm</option><option value="inch">inch</option></select><label for="format">Format:</label><select id="format"><option value="image/jpeg">JPG</option><option value="image/png">PNG</option></select><label for="targetSize">Target Size:</label><input type="number" id="targetSize" min="1" placeholder="Enter size"><select id="sizeUnit"><option value="kb">KB</option><option value="mb">MB</option></select><label for="background">Background:</label><select id="background"><option value="nochange">No Change</option><option value="black">Black</option><option value="white">White</option></select><button id="processButton" disabled>Resize and Convert</button><img id="preview" alt="Preview" style="display: none;"><a id="download" download="resized_image">Download Resized Image</a><script>const imageInput=document.getElementById('imageInput');const widthInput=document.getElementById('width');const heightInput=document.getElementById('height');const unitSelect=document.getElementById('unit');const formatSelect=document.getElementById('format');const targetSizeInput=document.getElementById('targetSize');const sizeUnitSelect=document.getElementById('sizeUnit');const backgroundSelect=document.getElementById('background');const processButton=document.getElementById('processButton');const preview=document.getElementById('preview');const download=document.getElementById('download');let originalImage=null;imageInput.addEventListener('change',(e)=>{const file=e.target.files[0];if (file){const reader=new FileReader();reader.onload=(event)=>{const img=new Image();img.onload=()=>{originalImage=img;preview.src=event.target.result;preview.style.display='block';processButton.disabled=false};img.src=event.target.result};reader.readAsDataurl(file)}});processButton.addEventListener('click',async ()=>{if (!originalImage) return;// Convert units to pixels (assuming 96 DPI for web) const dpi=96;let newWidth=parseFloat(widthInput.value);let newHeight=parseFloat(heightInput.value);const unit=unitSelect.value;if (unit==='cm'){newWidth=Math.round(newWidth * dpi / 2.54);newHeight=Math.round(newHeight * dpi / 2.54)}else if (unit==='inch'){newWidth=Math.round(newWidth * dpi);newHeight=Math.round(newHeight * dpi)}// Target size in bytes let targetSize=parseFloat(targetSizeInput.value);const sizeUnit=sizeUnitSelect.value;if (sizeUnit==='kb'){targetSize*=1024}else if (sizeUnit==='mb'){targetSize*=1024 * 1024}const format=formatSelect.value;const background=backgroundSelect.value;const canvas=document.createElement('canvas');canvas.width=newWidth;canvas.height=newHeight;const ctx=canvas.getContext('2d');// Set background if not 'nochange' if (background !=='nochange'){ctx.fillStyle=background;ctx.fillRect(0,0,newWidth,newHeight)}// Draw image (centered if background changed,else just scale) const aspectRatio=originalImage.width / originalImage.height;let drawWidth=newWidth;let drawHeight=newHeight;let offsetX=0;let offsetY=0;if (drawWidth / drawHeight>aspectRatio){drawWidth=newHeight * aspectRatio;offsetX=(newWidth - drawWidth) / 2}else{drawHeight=newWidth / aspectRatio;offsetY=(newHeight - drawHeight) / 2}ctx.drawImage(originalImage,offsetX,offsetY,drawWidth,drawHeight);// Function to get blob with quality adjustment for JPG const getBlob=(quality=1.0)=>{return new Promise((resolve)=>{canvas.toBlob((blob)=>{resolve(blob)},format,quality)})};let blob=await getBlob();let quality=1.0;// For PNG,no quality adjustment;warn if size exceeds if (format==='image/png'){if (blob.size>targetSize && targetSize>0){alert('PNG is lossless; cannot compress further without lossy methods. Proceeding with current size.')}}else{// For JPG,iteratively reduce quality to meet size while (blob.size>targetSize && quality>0.1 && targetSize>0){quality -=0.1;blob=await getBlob(quality)}if (blob.size>targetSize){alert('Could not compress to exact size; using lowest quality.')}}// Set download download.href=URL.createObjecturl(blob);download.download=`resized_image.${format==='image/jpeg' ? 'jpg':'png'}`;download.style.display='block';download.textContent='Download Resized Image'});</script></body>