Reactで、画像の一部にモザイクをかける方法

export type Point = { x: number; y: number };
export type Rect = { x: number; y: number; w: number; h: number };

// 範囲の中を size × size のマスに分け、マスごとに中の画素の平均の色で塗りつぶす
export function pixelate(ctx: CanvasRenderingContext2D, { x, y, w, h }: Rect, size: number) {
  if (w === 0 || h === 0) return;
  const image = ctx.getImageData(x, y, w, h);
  const d = image.data; // 1画素につき R, G, B, A の4つの値が並んでいる
  for (let by = 0; by < h; by += size) {
    for (let bx = 0; bx < w; bx += size) {
      // 範囲の右端と下端では、マスが size より小さくなる
      const bw = Math.min(size, w - bx);
      const bh = Math.min(size, h - by);
      const sum = [0, 0, 0, 0];
      for (let yy = by; yy < by + bh; yy++) {
        for (let xx = bx; xx < bx + bw; xx++) {
          const i = (yy * w + xx) * 4;
          for (let c = 0; c < 4; c++) sum[c] += d[i + c];
        }
      }
      const avg = sum.map((s) => Math.round(s / (bw * bh)));
      for (let yy = by; yy < by + bh; yy++) {
        for (let xx = bx; xx < bx + bw; xx++) {
          const i = (yy * w + xx) * 4;
          for (let c = 0; c < 4; c++) d[i + c] = avg[c];
        }
      }
    }
  }
  ctx.putImageData(image, x, y);
}

// 元の画像を描き直してから、範囲を順にモザイクにする
export function render(canvas: HTMLCanvasElement, image: ImageBitmap, rects: Rect[], size: number) {
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext('2d', { willReadFrequently: true });
  if (!ctx) throw new Error('canvas が使えません');
  ctx.drawImage(image, 0, 0);
  for (const r of rects) pixelate(ctx, r, size);
}

// 画面上のポインターの位置を、canvas の画素の座標に直す（CSS で縮めて表示していても合うようにする）
export function toCanvasPoint(canvas: HTMLCanvasElement, clientX: number, clientY: number): Point {
  const box = canvas.getBoundingClientRect();
  return {
    x: ((clientX - box.left) * canvas.width) / box.width,
    y: ((clientY - box.top) * canvas.height) / box.height,
  };
}

// ドラッグの始点と終点から、画像の内側に収まる長方形を作る（右下から左上へのドラッグでも同じ形になる）
export function rectFromPoints(a: Point, b: Point, width: number, height: number): Rect {
  const clamp = (v: number, max: number) => Math.min(Math.max(Math.round(v), 0), max);
  const x1 = clamp(Math.min(a.x, b.x), width);
  const y1 = clamp(Math.min(a.y, b.y), height);
  const x2 = clamp(Math.max(a.x, b.x), width);
  const y2 = clamp(Math.max(a.y, b.y), height);
  return { x: x1, y: y1, w: x2 - x1, h: y2 - y1 };
}

同じドラッグで、画面の座標をそのまま使ったときの範囲: {"x":26,"y":26,"w":181,"h":77}

naive.png（画面の座標をそのまま使った）: 元と色が違う画素 11297、それが収まる範囲 x 26〜206, y 26〜102

import { useEffect, useRef, useState } from 'react';
import type { ChangeEvent, PointerEvent } from 'react';
import { render, rectFromPoints, toCanvasPoint } from './mosaic';
import type { Point, Rect } from './mosaic';

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

export function App() {
  const [image, setImage] = useState<Loaded | null>(null);
  const [rects, setRects] = useState<Rect[]>([]);
  const [size, setSize] = useState(16);
  const [drag, setDrag] = useState<{ start: Point; now: Point } | null>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  // 範囲やマスの大きさが変わるたびに、元の画像から描き直す
  useEffect(() => {
    if (image && canvasRef.current) render(canvasRef.current, image.bitmap, rects, size);
  }, [image, rects, size]);

  async function handleFile(e: ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    const bitmap = await createImageBitmap(file);
    image?.bitmap.close();
    setRects([]);
    setImage({ bitmap, name: file.name });
  }

  function handlePointerDown(e: PointerEvent<HTMLCanvasElement>) {
    // canvas の外へ出てもドラッグを続けられるように、ポインターを捕まえておく
    e.currentTarget.setPointerCapture(e.pointerId);
    const p = toCanvasPoint(e.currentTarget, e.clientX, e.clientY);
    setDrag({ start: p, now: p });
  }

  function handlePointerMove(e: PointerEvent<HTMLCanvasElement>) {
    if (!drag) return;
    setDrag({ ...drag, now: toCanvasPoint(e.currentTarget, e.clientX, e.clientY) });
  }

  function handlePointerUp(e: PointerEvent<HTMLCanvasElement>) {
    if (!drag || !image) return;
    const end = toCanvasPoint(e.currentTarget, e.clientX, e.clientY);
    const r = rectFromPoints(drag.start, end, image.bitmap.width, image.bitmap.height);
    if (r.w > 0 && r.h > 0) setRects([...rects, r]);
    setDrag(null);
  }

  function handleSave() {
    const canvas = canvasRef.current;
    if (!image || !canvas) return;
    canvas.toBlob((blob) => {
      if (!blob) return;
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `${image.name.replace(/\.[^.]+$/, '')}-mosaic.png`;
      a.click();
      URL.revokeObjectURL(url);
    }, 'image/png');
  }

  // ドラッグ中の枠は canvas には描かず、上に重ねた要素で見せる（保存する画像に枠が入らないように）
  const selection = drag && image && rectFromPoints(drag.start, drag.now, image.bitmap.width, image.bitmap.height);

  return (
    <main>
      <input type="file" accept="image/*" aria-label="画像を選ぶ" onChange={handleFile} />
      {image && (
        <>
          <div className="stage">
            <canvas
              ref={canvasRef}
              className="preview"
              role="img"
              aria-label="モザイクをかけた画像のプレビュー"
              onPointerDown={handlePointerDown}
              onPointerMove={handlePointerMove}
              onPointerUp={handlePointerUp}
            />
            {selection && (
              <div
                className="selection"
                style={{
                  left: `${(selection.x / image.bitmap.width) * 100}%`,
                  top: `${(selection.y / image.bitmap.height) * 100}%`,
                  width: `${(selection.w / image.bitmap.width) * 100}%`,
                  height: `${(selection.h / image.bitmap.height) * 100}%`,
                }}
              />
            )}
          </div>
          <label className="size">
            マスの大きさ：{size}px
            <input type="range" min={4} max={40} step={4} value={size} onChange={(e) => setSize(Number(e.target.value))} />
          </label>
          <p className="info">モザイクの範囲：{rects.length}か所</p>
          <div className="toolbar">
            <button type="button" disabled={rects.length === 0} onClick={() => setRects(rects.slice(0, -1))}>1つ戻す</button>
            <button type="button" className="save" onClick={handleSave}>保存する</button>
          </div>
        </>
      )}
    </main>
  );
}

/* 枠を canvas の上に重ねるため、canvas を囲む要素を基準にする */
.stage { position: relative; display: inline-block; max-width: 100%; margin-top: 12px; line-height: 0; }
.preview { display: block; max-width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.selection { position: absolute; border: 2px dashed #067a98; box-sizing: border-box; pointer-events: none; }

範囲1（名札） (40, 40, 280, 120) / 範囲2（縞） (380, 40, 190, 120) / 範囲3（円から右下の外まで） (130, 260, 471, 141)
size16.png: PNG 601x401 RGBA | 正解（範囲3か所、マス 16px）と比べて 色が違う画素 0 / 241001
size8.png: PNG 601x401 RGBA | 正解（範囲3か所、マス 8px）と比べて 色が違う画素 0 / 241001
size8-undo.png: PNG 601x401 RGBA | 正解（範囲2か所、マス 8px）と比べて 色が違う画素 0 / 241001
size16.png で、3つの範囲の外にある画素のうち元と色が違うもの: 0

// 比べるための書き方：範囲を小さな canvas に縮めて描き、それを元の大きさに引き伸ばして描き戻す
import type { Rect } from './mosaic';

export function pixelateByScaling(ctx: CanvasRenderingContext2D, { x, y, w, h }: Rect, size: number, smoothShrink: boolean) {
  const small = document.createElement('canvas');
  small.width = Math.ceil(w / size);
  small.height = Math.ceil(h / size);
  const sctx = small.getContext('2d')!;
  sctx.imageSmoothingEnabled = smoothShrink;
  sctx.drawImage(ctx.canvas, x, y, w, h, 0, 0, small.width, small.height);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(small, 0, 0, small.width, small.height, x, y, w, h);
  ctx.imageSmoothingEnabled = true;
}

scaled-smooth.png: 実際のマスの区切りで数えると、マス 306 個のうち、中の色が1色にそろっていないマス 0 | 実際のマスごとの、元の画素の平均とマスの色の差の最大 175.2（0〜255）
scaled-smooth.png: （参考：平均の色で塗った画像と1画素ずつ比べた場合）平均の色からのずれの最大 224（0〜255） | 縞の部分の色: [(127, 127, 127), (159, 159, 159), (175, 175, 175), (191, 191, 191)] ほか（平均で塗った場合: [(128, 128, 128), (136, 137, 137)]）
scaled-nosmooth.png: 実際のマスの区切りで数えると、マス 306 個のうち、中の色が1色にそろっていないマス 0 | 実際のマスごとの、元の画素の平均とマスの色の差の最大 175.2（0〜255）
scaled-nosmooth.png: （参考：平均の色で塗った画像と1画素ずつ比べた場合）平均の色からのずれの最大 237（0〜255） | 縞の部分の色: [(0, 0, 0), (255, 255, 255)]（平均で塗った場合: [(128, 128, 128), (136, 137, 137)]）
scaled-smooth.png: 範囲の中の色 23 種類のうち、元の範囲の中にもある色 13 種類
scaled-nosmooth.png: 範囲の中の色 13 種類のうち、元の範囲の中にもある色 13 種類