Excalidraw/excalidraw/excalidraw-app/data/thumbnail.ts

import { exportToCanvas } from "../../packages/utils/export";
import { AppState, BinaryFiles } from "../../packages/excalidraw/types";
import { NonDeletedExcalidrawElement } from "../../packages/excalidraw/element/types";
import { DEFAULT_EXPORT_PADDING } from "../../packages/excalidraw/constants";

const THUMBNAIL_WIDTH = 200;
const THUMBNAIL_HEIGHT = 200;

export const generateThumbnail = async (
  elements: readonly NonDeletedExcalidrawElement[],
  appState: AppState,
  files: BinaryFiles,
): Promise<string> => {
  const canvas = await exportToCanvas({
    elements,
    appState,
    files,
    exportPadding: DEFAULT_EXPORT_PADDING,
    maxWidthOrHeight: Math.max(THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT),
  });

  const SvgCanvas = document.createElement("canvas");
  SvgCanvas.width = THUMBNAIL_WIDTH;
  SvgCanvas.height = THUMBNAIL_HEIGHT;
  const SvgCanvasContext = SvgCanvas.getContext("2d")!;

  const sourceAspectRatio = canvas.width / canvas.height;
  const targetAspectRatio = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT;

  let drawWidth = THUMBNAIL_WIDTH;
  let drawHeight = THUMBNAIL_HEIGHT;
  let drawX = 0;
  let drawY = 0;

  if (sourceAspectRatio > targetAspectRatio) {
    drawHeight = THUMBNAIL_WIDTH / sourceAspectRatio;
    drawY = (THUMBNAIL_HEIGHT - drawHeight) / 2;
  } else {
    drawWidth = THUMBNAIL_HEIGHT * sourceAspectRatio;
    drawX = (THUMBNAIL_WIDTH - drawWidth) / 2;
  }

  SvgCanvasContext.drawImage(canvas, drawX, drawY, drawWidth, drawHeight);

  return SvgCanvas.toDataURL("image/png");
};