Image Cropper - Crop & Rotate Images Online

// Client-side image cropping using Canvas API
async function cropImage(file, cropX, cropY, cropWidth, cropHeight, options = {}) {
  const { quality = 0.92, format = null } = options;

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

    img.onload = () => {
      URL.revokeObjectURL(url);

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

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

      ctx.drawImage(
        img,
        cropX, cropY, cropWidth, cropHeight,
        0, 0, cropWidth, cropHeight
      );

      canvas.toBlob(
        (blob) => {
          if (!blob) { reject(new Error('Crop failed')); return; }
          resolve({
            blob,
            width: cropWidth,
            height: cropHeight,
            originalWidth: img.naturalWidth,
            originalHeight: img.naturalHeight,
          });
        },
        outputType,
        outputType === 'image/png' ? undefined : quality
      );
    };

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

// Crop to center square
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const img = new Image();
  img.src = URL.createObjectURL(file);
  await new Promise((r) => (img.onload = r));

  const size = Math.min(img.naturalWidth, img.naturalHeight);
  const x = Math.round((img.naturalWidth - size) / 2);
  const y = Math.round((img.naturalHeight - size) / 2);

  const result = await cropImage(file, x, y, size, size, { format: 'image/png' });
  console.log(`Cropped: ${result.width}x${result.height}`);

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