Image Splitter — TypeScript source

Split an image into an even grid of tiles — rows × columns with a live cut-line preview and per-tile or bulk PNG download. Runs entirely in your browser.

This is the TypeScript implementation — the same logic the interactive tool runs, in a shareable, citable form.

Open the interactive tool →

// Image splitter — display snippet. The live tool adds the live cut-line
// preview and bulk download; canvas-bound, so no Go twin.
export async function splitToTiles(
  file: File,
  rows: number,
  cols: number,
): Promise<Blob[]> {
  const bitmap = await createImageBitmap(file);
  const tileW = Math.floor(bitmap.width / cols);
  const tileH = Math.floor(bitmap.height / rows);
  const tiles: Blob[] = [];
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      const canvas = document.createElement('canvas');
      canvas.width = tileW;
      canvas.height = tileH;
      const ctx = canvas.getContext('2d')!;
      ctx.drawImage(bitmap, col * tileW, row * tileH, tileW, tileH, 0, 0, tileW, tileH);
      const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'));
      if (blob) tiles.push(blob);
    }
  }
  return tiles;
}

Also available in 8 other languages

Every CosmoDev tool ships its pure logic in TypeScript (web) and Go (CLI), with authored implementations in a dozen-plus languages — the same contract, ported. Compare all languages side by side →