Image Resize & Watermark — TypeScript source

Batch-resize images by width, height or percentage and stamp a text watermark with position, opacity and size control — entirely in your browser, nothing uploaded.

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

Open the interactive tool →

// Image resize & watermark — display snippet. The live tool batches this
// pipeline in the browser; canvas-bound, so no Go twin.
export async function resizeAndWatermark(
  file: File,
  targetWidth: number,
  watermark: string,
): Promise<Blob> {
  const bitmap = await createImageBitmap(file);
  const w = targetWidth;
  const h = Math.round((bitmap.height / bitmap.width) * w);
  const canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  const ctx = canvas.getContext('2d')!;
  ctx.imageSmoothingQuality = 'high';
  ctx.drawImage(bitmap, 0, 0, w, h);

  const fontSize = Math.round((Math.min(w, h) * 6) / 100);
  ctx.font = `600 ${fontSize}px system-ui, sans-serif`;
  ctx.globalAlpha = 0.7;
  ctx.fillStyle = '#ffffff';
  ctx.strokeStyle = 'rgba(0,0,0,0.55)';
  ctx.lineWidth = Math.max(1, fontSize / 14);
  const x = w - ctx.measureText(watermark).width - 8;
  const y = h - 8;
  ctx.strokeText(watermark, x, y);
  ctx.fillText(watermark, x, y);
  ctx.globalAlpha = 1;

  return new Promise<Blob>((resolve, reject) =>
    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('encode failed'))), 'image/webp', 0.92),
  );
}

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 →