Source

// Turns a picked photo into a small square JPEG data URL, so it can live inside the page itself.
import { MAX_AVATAR } from "../../functions/lib/bio";

export async function shrinkPhoto(file: File, size = 256): Promise<string> {
  const src = URL.createObjectURL(file);
  try {
    const img = new Image();
    img.src = src;
    try {
      await img.decode();
    } catch {
      throw new Error("This browser cannot open that file. Try a JPEG or PNG photo.");
    }
    const side = Math.min(img.naturalWidth, img.naturalHeight);
    const canvas = document.createElement("canvas");
    canvas.width = canvas.height = size;
    const ctx = canvas.getContext("2d")!;
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, size, size);
    ctx.imageSmoothingQuality = "high";
    ctx.drawImage(img, (img.naturalWidth - side) / 2, (img.naturalHeight - side) / 2, side, side, 0, 0, size, size);
    for (const quality of [0.86, 0.75, 0.6, 0.45]) {
      const data = canvas.toDataURL("image/jpeg", quality);
      if (data.length <= MAX_AVATAR) return data;
    }
    throw new Error("That photo is too detailed to store. Try another one.");
  } finally {
    URL.revokeObjectURL(src);
  }
}