モザイク画像を再利用する「オフスクリーン・キャッシュ」の仕組み

このツールの入力から出力まで

現行コードの確認日：2026-10-12

入力

人物の顔を隠したい写真を1枚選び、効果の種類と強さを指定します。猫スタンプは覆う表現の選択肢です。

処理

FaceDetectorが返す顔枠を画像寸法に対する割合で保持し、縮小・再拡大したモザイクなどをその範囲へ描きます。枠はタップで追加・削除できます。

出力

長辺2000px以下に縮小した画像を処理し、JPEG品質0.95で保存します。

まず確認する点：検出枠の数と本当に隠すべき人数を照合します。モデルが見落とす顔、枠の外の名前や服装は別に確認します。

仕上がりの例

集合写真に写る顔へ、まとめてモザイクをかけた例です。

画像を拡大

サンプルにはAIで生成した架空の人物画像を使用しています。

加工前・加工後

閉じる

掲載画像はサイトにある既存の公開作例です。保存済みの資料ではAIで作成した架空の人物・手の画像を使用しています。今回の確認日が、この作例を実行した日を表すわけではありません。

保存済み検証記録の条件を見る

資料の種類は「既存の公開作例」です。公開作例と保存済み記録で素材や色などが異なる場合があるため、下の数値は保存済み検証記録の条件として読んでください。

集合写真に写る6人の顔を、モザイクでまとめて隠した例です。顔以外の服装や背景は残ります。

記録の入力画像

1024×559px (JPEG)

記録の出力画像

1024×559px (JPEG)

この作例には操作値の記録がないため、同じ設定で再現できるとは断定しません。本文の数値は現行の実装仕様です。

資料ファイルの作成日は実行日として扱っていません。個別端末の処理速度や、ほかの写真に対する検出・加工の精度を測定した資料でもありません。

実装の確認箇所：src/pages/ai/face-det/face-mosaic/index.astro。以下のコード抜粋と出力条件は、この本番実装に基づいて説明します。

仕組みを読み進めるときは、MediaPipeの顔検出（顔枠の入力・出力と検出漏れの扱い）、Canvas APIと画像処理（画像寸法、drawImage、画素と透明度の扱い）が参考になります。

1. 描画負荷を最小化する「モザイク・キャッシュ」

ユーザーが顔の枠を追加・削除するたびに、巨大な元の画像からピクセルデータを計算してモザイクを作るのは非常に非効率です。

本ツールでは、「全画面をモザイク化した状態の隠しCanvas」を作り、モザイクの強さが変わらない間は再利用します。描画時には、このキャッシュされたモザイク画像から「必要な部分だけを型抜き（Clip）」して転送するため、顔ごとに縮小・拡大を繰り返す処理を省けます。ただし、枠をクリップする処理は枠数に応じて増えます。

タップした点が顔枠の楕円内か調べる式です。xとy、boxの値は同じ正規化座標で扱います。実装はモザイクの対象範囲を検出枠の1.3倍に広げています。

function isInsideFace(x, y, box) {
  const rx = box.width * 1.3 / 2;
  const ry = box.height * 1.3 / 2;
  if (rx <= 0 || ry <= 0) return false;
  const dx = x - box.xCenter, dy = y - box.yCenter;
  return dx * dx / (rx * rx) + dy * dy / (ry * ry) <= 1;
}

2. 楕円アルゴリズムによる「自然な」当たり判定

AIが検出する座標は矩形（四角形）ですが、人間の顔は楕円形に近いため、四角い判定のままでは「枠の角をタップした時に意図せず消えてしまう」といったUXの低下を招きます。

これを解決するため、座標の当たり判定に楕円の方程式を応用しています。中心からの距離を軸ごとの半径で正規化して計算することで、ユーザーが「顔そのもの」を触った時だけ反応する、直感的なインターフェースを実現しました。

3. ベクトル座標管理によるレスポンシブ対応

検知された顔の座標を「ピクセル」ではなく「0.0〜1.0の割合（正規化座標）」で管理しています。

これにより、内部処理用の高解像度データと、画面表示用のプレビューCanvasのサイズが異なっていても、保持した割合から描画寸法へ換算できます。スマホの縦横回転などでCanvasの物理サイズが変わっても、常に同じ位置にモザイクを維持できるメリットがあります。

出力の仕様と確認する点

長辺2000px以下に縮小した画像を処理し、JPEG品質0.95で保存します。モザイク、猫スタンプ、黒塗りを選べます。モザイクの強さは縮小画像を何倍に引き伸ばすかに影響します。

検出した顔の範囲はタップで削除でき、空いている位置をタップすると手動の範囲を追加します。保存前には画像全体を見て、隠したい顔が残っていないか確認してください。

顔が隠れても髪型、服装、背景や画像内の文字から人物が分かることがあります。また、モザイク加工だけで匿名性を保証するものではありません。公開する内容に合わせて黒塗りや別の範囲の処理を選びます。