Canvas image compression to a target size

export type CompressOptions = {
  maxSide?: number; // longest edge in px
  maxBytes?: number; // optional size budget
  type?: 'image/jpeg' | 'image/webp';
  quality?: number; // starting quality 0..1
  minQuality?: number;
};

const encode = (canvas: HTMLCanvasElement, type: string, quality: number) =>
  new Promise<Blob>((resolve, reject) =>
    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('Encoding failed'))), type, quality),
  );

export async function compressImage(file: Blob, opts: CompressOptions = {}): Promise<Blob> {
  const { maxSide = 2000, maxBytes, type = 'image/webp', quality = 0.85, minQuality = 0.3 } = opts;

  const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' });
  const scale = Math.min(1, maxSide / Math.max(bitmap.width, bitmap.height));
  const canvas = document.createElement('canvas');
  canvas.width = Math.max(1, Math.round(bitmap.width * scale));
  canvas.height = Math.max(1, Math.round(bitmap.height * scale));

  const ctx = canvas.getContext('2d');
  if (!ctx) throw new Error('Canvas not supported');
  ctx.fillStyle = '#fff'; // avoid black backgrounds when transparency meets JPEG
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.imageSmoothingQuality = 'high';
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close();

  let best = await encode(canvas, type, quality);
  if (!maxBytes || best.size <= maxBytes) return best;

  // Binary search for the highest quality that still fits the budget.
  let lo = minQuality;
  let hi = quality;
  for (let i = 0; i < 6; i++) {
    const mid = (lo + hi) / 2;
    const blob = await encode(canvas, type, mid);
    if (blob.size <= maxBytes) {
      best = blob;
      lo = mid;
    } else {
      hi = mid;
      if (i === 0) best = blob.size < best.size ? blob : best; // keep the smallest seen
    }
  }
  return best;
}