200KBのAIモデルで顔自動モザイク — face-api.js + Canvasでブラウザ完結
この記事で分かること
200KBの軽量AIモデルとface-api.js、Canvasを使ってブラウザ上で顔に自動モザイクをかけられる。画像をサーバーに送信せずに処理が完結するため、プライバシーに配慮した実装が可能。顔検出の精度と処理速度のバランスを調整するパラメータ設定が実用上のポイントとなる。
詳細要約
ブラウザ上で動作する軽量AIモデル（200KB）を使い、face-api.jsとCanvasを組み合わせることで、サーバー不要で顔に自動モザイクをかけられる。実際に使う際は、face-api.jsで顔検出を行った後、CanvasのdrawImageやgetImageDataで該当領域をピクセル単位で加工する手順を組む。処理はすべてクライアント側で完結するため、ユーザーのプライバシー保護や通信コスト削減に有効だが、精度はモデルサイズに依存するため、複数顔や横向き顔では検出漏れが起こりうる点に注意が必要。