Reactで、画像に文字を入れて保存する方法

export type Position = 'top' | 'middle' | 'bottom';

export type OverlayOptions = {
  text: string;
  fontFamily: string; // CSS の font-family の書き方
  sizeRatio: number; // 画像の幅に対する文字の大きさ（0.08 なら幅の8%）
  position: Position;
  color: string;
  outline: boolean;
};

export function fontFor(o: OverlayOptions, imageWidth: number): string {
  return `bold ${Math.round(imageWidth * o.sizeRatio)}px ${o.fontFamily}`;
}

// 1文字ずつ足していき、幅を超えたら次の行へ送る。改行はそのまま行を分ける
export function wrapLines(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[] {
  const segmenter = new Intl.Segmenter('ja', { granularity: 'grapheme' });
  const lines: string[] = [];
  for (const paragraph of text.split('\n')) {
    let line = '';
    for (const { segment } of segmenter.segment(paragraph)) {
      if (line && ctx.measureText(line + segment).width > maxWidth) {
        lines.push(line);
        line = segment;
      } else {
        line += segment;
      }
    }
    lines.push(line);
  }
  return lines;
}

export function drawOverlay(canvas: HTMLCanvasElement, image: ImageBitmap, o: OverlayOptions) {
  // canvas の大きさは、表示の大きさではなく元の画像の大きさにする
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext('2d')!;
  ctx.drawImage(image, 0, 0);
  if (!o.text) return;

  const size = Math.round(image.width * o.sizeRatio);
  ctx.font = fontFor(o, image.width);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  const lines = wrapLines(ctx, o.text, image.width * 0.9);
  const lineHeight = size * 1.3;
  const blockHeight = lineHeight * lines.length;
  const margin = image.height * 0.06;
  const top =
    o.position === 'top' ? margin
    : o.position === 'bottom' ? image.height - margin - blockHeight
    : (image.height - blockHeight) / 2;

  ctx.lineJoin = 'round';
  ctx.lineWidth = size * 0.16;
  ctx.strokeStyle = 'rgba(0, 0, 0, 0.75)';
  ctx.fillStyle = o.color;
  lines.forEach((line, i) => {
    const y = top + lineHeight * (i + 0.5);
    if (o.outline) ctx.strokeText(line, image.width / 2, y); // 縁取りを先に描き、上から文字を塗る
    ctx.fillText(line, image.width / 2, y);
  });
}

窓ぎわでひなたぼっこを（1079px）
していたら、いつのまに（1079px）
か夕方になっていました（1076px）

["ね","こ","👨‍👩‍👧","ね","こ"]

import { useEffect, useId, useRef, useState } from 'react';
import { canvasToBlob, downloadBlob, drawOverlay, fontFor, type OverlayOptions, type Position } from './drawText';

type Loaded = { bitmap: ImageBitmap; name: string };

const FONTS = [
  { label: 'ゴシック体', value: 'sans-serif' },
  { label: '明朝体（Webフォント）', value: '"Demo Serif", sans-serif' },
];

export function TextOverlay() {
  const [image, setImage] = useState<Loaded | null>(null);
  const [text, setText] = useState('');
  const [fontFamily, setFontFamily] = useState(FONTS[0].value);
  const [position, setPosition] = useState<Position>('bottom');
  const [color, setColor] = useState('#ffffff');
  const [outline, setOutline] = useState(true);
  const [saved, setSaved] = useState('');
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const id = useId();

  // 画像を選び直したら、前の ImageBitmap を解放する
  useEffect(() => () => image?.bitmap.close(), [image]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!image || !canvas) return;
    const options: OverlayOptions = { text, fontFamily, sizeRatio: 0.08, position, color, outline };
    let ignore = false;
    // Webフォントは、読み込み終わってから描く
    document.fonts.load(fontFor(options, image.bitmap.width), text || ' ').then(() => {
      if (!ignore) drawOverlay(canvas, image.bitmap, options);
    });
    return () => {
      ignore = true;
    };
  }, [image, text, fontFamily, position, color, outline]);

  async function handleFile(file: File | undefined) {
    if (!file) return;
    setImage({ bitmap: await createImageBitmap(file), name: file.name });
    setSaved('');
  }

  async function save() {
    const canvas = canvasRef.current;
    if (!image || !canvas) return;
    const blob = await canvasToBlob(canvas, 'image/png');
    const filename = image.name.replace(/\.[^.]+$/, '') + '-text.png';
    downloadBlob(blob, filename);
    setSaved(`${filename}（${canvas.width}×${canvas.height}）を保存しました`);
  }

  return (
    <div className="overlay">
      <p>
        <label htmlFor={`${id}-file`}>画像</label>
        <input id={`${id}-file`} type="file" accept="image/*" onChange={(e) => handleFile(e.target.files?.[0])} />
      </p>
      <p>
        <label htmlFor={`${id}-text`}>入れる文字</label>
        <textarea id={`${id}-text`} rows={2} value={text} onChange={(e) => setText(e.target.value)} />
      </p>
      <p className="row">
        <label>
          書体
          <select value={fontFamily} onChange={(e) => setFontFamily(e.target.value)}>
            {FONTS.map((f) => <option key={f.value} value={f.value}>{f.label}</option>)}
          </select>
        </label>
        <label>
          位置
          <select value={position} onChange={(e) => setPosition(e.target.value as Position)}>
            <option value="top">上</option>
            <option value="middle">中央</option>
            <option value="bottom">下</option>
          </select>
        </label>
        <label>
          色
          <input type="color" value={color} onChange={(e) => setColor(e.target.value)} />
        </label>
        <label>
          <input type="checkbox" checked={outline} onChange={(e) => setOutline(e.target.checked)} />
          縁取り
        </label>
      </p>
      {image && <canvas ref={canvasRef} aria-label="文字を入れた画像" />}
      <p>
        <button type="button" onClick={save} disabled={!image}>PNGで保存</button>
      </p>
      <p className="saved" aria-live="polite">{saved}</p>
    </div>
  );
}

export function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality?: number): Promise<Blob> {
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('画像を書き出せませんでした'))), type, quality);
  });
}

export function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}