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

export type WatermarkOptions = {
  text: string;
  opacity: number; // 0〜1
  angle: number; // 傾ける角度（度）。右上がりにしたいので、描くときは -angle で回す
  sizeRatio: number; // 画像の短い辺に対する文字の大きさ（0.06 なら短い辺の6%）
  background?: string; // JPEG で保存するときの下地の色
};

// 透かしの文字を不透明で描いた「タイル」。2行目は半分ずらして、れんが積みにする
export function makeTile(text: string, size: number): HTMLCanvasElement {
  const tile = document.createElement('canvas');
  const ctx = tile.getContext('2d')!;
  const font = `bold ${size}px sans-serif`;
  ctx.font = font;
  const w = Math.ceil(ctx.measureText(text).width) + size * 2; // 左右の間隔は文字2つ分
  const h = size * 2.5; // 1段の高さ（文字と上下の間隔を合わせて）
  tile.width = w;
  tile.height = h * 2;
  // canvas の大きさを変えると描く設定が初期値に戻るので、ここで設定し直す
  ctx.font = font;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.lineJoin = 'round';
  ctx.lineWidth = size * 0.12;
  ctx.strokeStyle = '#000000';
  ctx.fillStyle = '#ffffff';
  const put = (x: number, y: number) => {
    ctx.strokeText(text, x, y);
    ctx.fillText(text, x, y);
  };
  put(w / 2, h / 2);
  put(0, h * 1.5); // 左右の端で半分ずつ切れるが、並べるとつながる
  put(w, h * 1.5);
  return tile;
}

export function drawWatermark(canvas: HTMLCanvasElement, image: ImageBitmap, o: WatermarkOptions) {
  const { width, height } = image;
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d')!;
  if (o.background) {
    ctx.fillStyle = o.background;
    ctx.fillRect(0, 0, width, height);
  }
  ctx.drawImage(image, 0, 0);
  if (!o.text) return;

  const size = Math.max(12, Math.round(Math.min(width, height) * o.sizeRatio));
  const pattern = ctx.createPattern(makeTile(o.text, size), 'repeat')!;
  // 模様を画像の中心のまわりで回す。塗るのは canvas 全体なので、角まで埋まる
  pattern.setTransform(new DOMMatrix().translate(width / 2, height / 2).rotate(-o.angle));
  ctx.globalAlpha = o.opacity;
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, width, height);
  ctx.globalAlpha = 1;
}

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);
}

import { useEffect, useId, useRef, useState } from 'react';
import { canvasToBlob, downloadBlob, drawWatermark } from './drawWatermark';

type Loaded = { bitmap: ImageBitmap; name: string };
type Format = 'image/jpeg' | 'image/png';

export function Watermark() {
  const [image, setImage] = useState<Loaded | null>(null);
  const [text, setText] = useState('© example.com');
  const [opacity, setOpacity] = useState(0.3);
  const [angle, setAngle] = useState(30);
  const [format, setFormat] = useState<Format>('image/jpeg');
  const [saved, setSaved] = useState('');
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const id = useId();

  useEffect(() => () => image?.bitmap.close(), [image]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!image || !canvas) return;
    drawWatermark(canvas, image.bitmap, {
      text,
      opacity,
      angle,
      sizeRatio: 0.06,
      // JPEG は透明を持てないので、透明な部分を白で塗ってから描く
      background: format === 'image/jpeg' ? '#ffffff' : undefined,
    });
  }, [image, text, opacity, angle, format]);

  async function handleFile(file: File | undefined) {
    if (!file) return;
    setImage({ bitmap: await createImageBitmap(file), name: file.name });
    setFormat(file.type === 'image/png' ? 'image/png' : 'image/jpeg'); // 元の形式に合わせる
    setSaved('');
  }

  async function save() {
    const canvas = canvasRef.current;
    if (!image || !canvas) return;
    const blob = await canvasToBlob(canvas, format, format === 'image/jpeg' ? 0.9 : undefined);
    const ext = format === 'image/jpeg' ? 'jpg' : 'png';
    const filename = `${image.name.replace(/\.[^.]+$/, '')}-wm.${ext}`;
    downloadBlob(blob, filename);
    setSaved(`${filename}（${canvas.width}×${canvas.height}、${Math.round(blob.size / 1024)}KB）を保存しました`);
  }

  return (
    <div className="watermark">
      <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>
        <input id={`${id}-text`} value={text} onChange={(e) => setText(e.target.value)} />
      </p>
      <p className="row">
        <label>
          濃さ
          <input type="range" min={0.1} max={0.8} step={0.05} value={opacity}
            onChange={(e) => setOpacity(Number(e.target.value))} />
          <output>{Math.round(opacity * 100)}%</output>
        </label>
        <label>
          角度
          <select value={angle} onChange={(e) => setAngle(Number(e.target.value))}>
            <option value={0}>0°</option>
            <option value={30}>30°</option>
            <option value={45}>45°</option>
          </select>
        </label>
        <label>
          形式
          <select value={format} onChange={(e) => setFormat(e.target.value as Format)}>
            <option value="image/jpeg">JPEG</option>
            <option value="image/png">PNG</option>
          </select>
        </label>
      </p>
      {image && <canvas ref={canvasRef} aria-label="透かしを入れた画像" />}
      <p>
        <button type="button" onClick={save} disabled={!image}>保存</button>
      </p>
      <p className="saved" aria-live="polite">{saved}</p>
    </div>
  );
}