Image Resizer - Resize Images by Dimensions, Percentage & Presets Online

// Client-side image resizing using Canvas API
async function resizeImage(file, targetWidth, targetHeight, options = {}) {
  const { quality = 0.85, format = null, fitMode = 'fit' } = options;

  return new Promise((resolve, reject) => {
    const img = new Image();
    const url = URL.createObjectURL(file);

    img.onload = () => {
      URL.revokeObjectURL(url);
      const origW = img.naturalWidth;
      const origH = img.naturalHeight;
      let canvasW, canvasH, drawX = 0, drawY = 0, drawW, drawH;

      if (fitMode === 'fit') {
        const scale = Math.min(targetWidth / origW, targetHeight / origH);
        canvasW = Math.round(origW * scale);
        canvasH = Math.round(origH * scale);
        drawX = 0; drawY = 0; drawW = canvasW; drawH = canvasH;
      } else if (fitMode === 'fill') {
        const scale = Math.max(targetWidth / origW, targetHeight / origH);
        drawW = Math.round(origW * scale);
        drawH = Math.round(origH * scale);
        drawX = Math.round((targetWidth - drawW) / 2);
        drawY = Math.round((targetHeight - drawH) / 2);
        canvasW = targetWidth; canvasH = targetHeight;
      } else {
        canvasW = targetWidth; canvasH = targetHeight;
        drawW = targetWidth; drawH = targetHeight;
      }

      const canvas = document.createElement('canvas');
      canvas.width = canvasW; canvas.height = canvasH;
      const ctx = canvas.getContext('2d');

      const outputType = format || file.type || 'image/jpeg';
      if (outputType === 'image/jpeg') {
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, canvasW, canvasH);
      }

      ctx.drawImage(img, drawX, drawY, drawW, drawH);

      canvas.toBlob(
        (blob) => {
          if (!blob) { reject(new Error('Resize failed')); return; }
          resolve({
            blob, width: canvasW, height: canvasH,
            originalSize: file.size, resizedSize: blob.size,
          });
        },
        outputType,
        outputType === 'image/png' ? undefined : quality
      );
    };

    img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('Failed to load')); };
    img.src = url;
  });
}

// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const result = await resizeImage(file, 800, 600, { quality: 0.9, fitMode: 'fit' });
  console.log(`Resized: ${result.width}x${result.height}, ${result.resizedSize} bytes`);

  const url = URL.createObjectURL(result.blob);
  const a = document.createElement('a');
  a.href = url; a.download = 'resized.jpg'; a.click();
  URL.revokeObjectURL(url);
});