[WEB App] OpenCV Inpaint — OpenCV WASM によるブラウザ完結型 画像修復ツール

OpenCV Inpaint

画像の不要な部分をブラシで塗って消去する、ブラウザ完結型の画像修復（Inpainting）ツール。

OpenCV 4.xをEmscriptenでカスタムWASMビルド（約2.4MB）し、cv.inpaint による古典的画像修復アルゴリズムをブラウザ上で直接実行する。サーバーへの画像アップロードは一切不要。

OpenCV Inpaint

画像の不要部分をブラシで塗って消去。ブラウザ完結の画像修復ツール。

lain-lab.com

スクリーンショット

画像読み込み

マスク塗り

消去結果

使い方

1. 画像を読み込む

左パネルのドロップエリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択。中央ビューポートへの直接ドロップにも対応。

2. 消したい部分をブラシで塗る

マウスドラッグで消去したい領域を赤いブラシで塗りつぶす。ブラシサイズは左パネルのスライダーまたは [ ] キーで調整可能。マウスカーソルにブラシサイズのプレビュー円が表示される。

3. Inpaint実行

「INPAINT」ボタンまたは塗り終えたら実行。塗った部分が周囲のピクセル情報から修復され、結果がキャンバスにそのまま反映される。

一度で完璧に消えない場合は、繰り返しInpaintを実行することで段階的に綺麗になる。

4. Undo / Redo

Inpaint結果が気に入らなければ Ctrl+Z で何度でも戻れる。Ctrl+Y で進む。ESC で現在のマスク（赤い塗り）だけをクリア。

5. 保存

「SAVE PNG」ボタンで現在の画像をPNGとしてダウンロード。

得意なこと・苦手なこと

綺麗に消せるケース

• 単色・平滑な背景上の小さな不要物（文字、ロゴ、ゴミ）
• ウォーターマークの除去
• 均一なテクスチャ上の傷や汚れ

ぼやけてしまうケース

• 広い面積の消去（AIベースのInpaintingとは異なり、構造やパターンの推論はしない）
• 複雑な模様やケーブルの束の上での修復
• 被写体の大部分を消そうとする操作

古典的な周囲ピクセル補間アルゴリズムのため、「消しゴム」レベルの用途に割り切って使うのが正しい。

ショートカットキー

キー	操作
Ctrl+Z	Undo（元に戻す）
Ctrl+Y / Ctrl+Shift+Z	Redo（やり直し）
ESC	マスクをクリア
[ / ]	ブラシサイズ縮小 / 拡大

設定項目

項目	説明
Brush Size	塗りブラシの半径（2〜80px）
Inpaint Radius	修復計算の参照半径（1〜20）。大きいほど広く参照するが処理が重くなる
Algorithm	Navier-Stokes（流体力学ベース）/ Telea（Fast Marching法ベース）の切替

技術スタック

• OpenCV 4.x WASM — Emscriptenカスタムビルド（約2.4MB）。core, imgproc, photoモジュールのみ
• Astro — 静的サイト生成
• HTML5 Canvas — 描画・マスク管理・画像入出力

技術記事

[JavaScript] 極小2.4MBのOpenCV Wasmを自作してブラウザで画像処理（Inpainting）を動かす

OpenCVをEmscriptenで軽量ビルドし、WebAssemblyとしてブラウザで動かす方法を解説。cv.inpaintを用いた修復処理の実装や、grabCut除外によるエラーなどのトラブル情報もまとめました。

lain-lab.com

更新履歴

• [v1.0] (2026-09-04): 初回公開。
  • ブラシによるマスク描画＆cv.inpaint消去
  • Navier-Stokes / Telea アルゴリズム切替
  • Undo / Redo（無制限）
  • ショートカットキー対応
  • ブラシサイズプレビューカーソル
  • ドラッグ＆ドロップ画像読み込み
  • PNG保存