Canvasへの画像展開と最大800pxの作業解像度
本ツールはWebブラウザのCanvas APIを使って画像を処理します.利用者が画像ファイルを選ぶと,ブラウザ上で読み込み,縦横比を保ちながら長辺が最大800ピクセルに収まるよう作業サイズを決定します.大きな画像をそのまま画素単位で探索すると,計算量とメモリ使用量が急増し,画面が長時間応答しなくなる可能性があるためです.
縮小した画像は,操作結果を表示するCanvas,補完の基準となる画像データ,消去対象を記録するマスクへ同じ座標系で展開します.表示とマスクの幅・高さを一致させることで,画面上で塗った位置と実際に処理するピクセルを対応させます.これはフル解像度編集ではなく,ブラウザで短時間に試せる補修を優先した設計です.
元のファイルをCanvasへ再描画すると,ファイルコンテナに含まれていたExif,GPS,撮影条件,独自のカラープロファイルなどをそのまま引き継ぐことはできません.入力が数千ピクセルの写真でも,出力は最大800pxの作業画像です.原寸や色管理が重要な制作物では,専用の画像編集ソフトを使用してください.
ファイル選択時は画像のMIMEタイプを確認し,ブラウザのFileReaderと画像デコーダーで読み込めた場合だけCanvasを初期化します.拡張子が画像に見えても,破損ファイルやブラウザが解釈できない形式は処理を開始できません.読み込み後は縦横のうち長い方が800pxを超える場合だけ縮小し,それより小さい画像は元の縦横寸法を作業サイズとして使います.
したがって「800px」は固定サイズではなく上限です.
表示用Canvasは利用者がブラシ位置と結果を確認する面,処理用のImageDataは補完計算でRGB値を読む面,マスク用Canvasは未処理領域を判定する面です.三つは同じ画像座標を共有しますが役割は異なります.画面へ重ねる半透明の選択色は操作の目印であり,補完後のPNGへその色を残すための描画ではありません.
ブラシによるマスク作成と操作履歴
不要物の指定には,Canvas上のブラシを使います.ポインターを押して動かすと,表示用Canvasには選択範囲を示す半透明色を描き,マスク用Canvasには同じ座標と太さで処理対象を記録します.Pointer Eventsを利用することで,マウスだけでなく対応ブラウザのタッチやペン入力も同じ処理へまとめます.
ブラシの軌跡は「消去する物体」を自動認識した輪郭ではありません.利用者が塗ったピクセルを対象として扱うため,対象から少しだけ外側まで覆いつつ,残したい境界を広く塗り過ぎないことが結果へ影響します.細い電線なら線幅に近いブラシ,点状の汚れなら小さなブラシというように調整してください.
描画前の状態は操作履歴へ保存し,元に戻す操作で直前の画像・マスクへ戻せるようにします.ImageDataは幅×高さ×4成分の大きな配列であるため,履歴を無制限に保持するとメモリを消費します.本ツールでは保持数に上限を設け,最近の操作だけを戻せる設計とします.処理後に再びブラシを使う場合は,以前の完了表示を解除して新しい編集状態であることを示します.
画面に見えているCanvasのCSS上の大きさと,実際に画素を保持するCanvasの内部サイズは一致しない場合があります.そこでポインター位置を表示領域の縦横比で換算し,長辺最大800pxの作業画像に対応する座標へ直してからマスクへ記録します.履歴には表示だけでなく画像とマスク双方のImageDataを保存し,最大10件まで保持します.
元に戻せる回数を限定するのは,1件でも幅×高さ×4バイト相当のデータを複数持つためです.
7×7パッチとSSDによる候補探索
「なぞった部分を消去」を実行すると,マスク領域の外側に接する境界から補完を進めます.中心の周囲に7×7ピクセルの小さなパッチを置き,近くにある未マスク領域のパッチと比較します.比較には,対応するRGB成分の差を二乗して合計するSSD(Sum of Squared Differences)を使います.
対象パッチにはまだ色を決められないマスク画素が含まれるため,比較可能な既知画素だけでスコアを求めます.スコアが小さい候補は,周辺の色や局所的な模様が比較的近いと判断できます.見つけた候補の画素を対象領域へコピーし,境界から内部へ少しずつ進めます.
画像全体の全候補を1ピクセル刻みで比較すると非常に重いため,探索距離,候補の刻み,反復回数に上限を設けます.この方法は画像の意味を理解しません.空を空として生成したり,隠れていた顔や建物を推定したりするのではなく,近傍に既に存在する画素を数値的に比較して移します.そのため「AI消去」や「生成塗りつぶし」と同じ結果を期待することはできません.
実装では1回の反復で境界画素を最大12点選び,各点の周囲にある7×7パッチを処理します.参照候補は対象点から半径80pxの範囲を2px刻みで走査し,マスクされていない既知画素だけのRGB二乗誤差を比較します.最大200回の反復は処理時間が際限なく伸びることを避けるための上限であり,到達しただけで自然な補修が完成したことを意味しません.
候補が少ない画像端や広いマスクほど,同じ色や模様を十分に見つけにくくなります.
近傍平均によるフォールバック
パッチ探索は,適切な候補が近くにない場合や反復上限へ達した場合,マスク全体を処理できないことがあります.そこで,反復後に残った領域へは,周囲の処理済み画素からRGB平均を求めて色を広げるフォールバックを適用します.境界から内側へ平均色を伝えることで,元の不要物を目立ちにくくします.
平均色による補完は,細かな模様を復元する処理ではありません.残存領域が大きいほどぼかしたような面になりやすく,直線や文字のつながりも保持できません.また,フォールバックにも反復上限があるため,あらゆる形状でマスクが必ずゼロになるとは断言できません.処理結果を目視し,必要なら元に戻して範囲を小さく分けてください.
パッチコピーと近傍平均を組み合わせる目的は,汎用的な写真生成ではなく,単純な背景にある小さな不要物を短時間で近似補修することです.アルゴリズムの限界を画面と説明で明示することで,処理結果を過信せずに利用できます.
フォールバックはマスク境界に接する周囲8方向の既知画素を集め,そのRGB平均を対象画素へ割り当てます.この処理も最大60回までで,終了後に未処理のマスク画素が残っていないかを数えます.残存があれば成功扱いにせず,範囲を小さくして再試行するよう画面へ示します.平均色は細部を復元しないため,大きな領域では色が混ざった平坦な面になりやすく,直線や規則模様をつなぐ用途には向きません.
向く画像と苦手な画像
比較的良い結果を得やすいのは,空,単色の壁,ぼけた背景,砂や芝生など,対象の周りに似た色や細かな模様が十分ある画像です.センサーごみ,小さな落ち葉,遠景の小さな人物など,周囲に対して対象が小さいほど候補を見つけやすくなります.
一方,顔や身体の一部,文字,窓枠,道路標示,タイルの目地など,意味のある形や正確な連続線を必要とする場所は苦手です.対象が大きい,画像の端に接する,周囲が対象物で囲まれている場合も参照画素が不足します.色が似ていても構造が異なるパッチを選ぶことがあり,繰り返し模様がずれたり,輪郭が二重になったりします.
一度に広く塗るより,ブラシを少し大きめにして小区画ずつ処理し,各回で仕上がりを確認する方が修正しやすくなります.不自然になった場合は元に戻し,範囲,ブラシ幅,処理順を変えてください.重要な写真は元ファイルを別に保存し,このツールのPNGを上書き用途に使わないことを勧めます.
操作時は,まず対象よりわずかに広い範囲を塗り,背景との境界までマスクへ含めます.次に小さな区画で補完を実行し,保存前のCanvasを目視して,模様の繰り返し,輪郭の二重化,平均色のにじみがないか確認します.不自然な場合は直近10件の範囲で元に戻し,ブラシ幅や処理範囲を変えます.電線のような細長い対象も,背景の線や建物をまたぐ部分ごとに分ける方が変化を確認しやすくなります.
PNG保存,メタデータ,ブラウザ内処理の範囲
保存時は,表示用Canvasにある作業結果をPNGへ変換してダウンロードします.入力がJPEGやWebPでも出力はPNGです.PNGは画素を可逆圧縮しますが,元のJPEG圧縮前データや元解像度を復元するものではありません.写真によっては,出力PNGのファイル容量が入力JPEGより大きくなる場合があります.
Canvasから生成する新しいファイルには,元画像のExifやGPSなどが引き継がれる保証はありません.位置情報を残したくない場合にも役立つ可能性はありますが,メタデータ除去専用の検証機能ではないため,公開前に別の確認手段を用いてください.透明部分や色の見え方もブラウザのデコード・描画結果に依存します.
ファイル読み込み,マスク描画,パッチ探索,近傍平均,PNG生成は,このツールのJavaScriptとCanvas上で行います.ただし,この説明は画像補完処理の実装範囲について述べるもので,サイト全体が完全に無通信であることや,拡張機能・共有端末を含む環境全体の安全性を保証しません.機密画像を扱う場合は,利用組織のルールと端末環境を確認してください.
保存されるのは編集時のCanvasをPNGへ変換した画像であり,入力ファイルそのものを更新する処理ではありません.JPEGやWebPを読み込んだ場合も形式はPNGへ変わり,作業時に縮小された画像は元の画素数へ戻りません.ExifやGPS,撮影機器情報,カラープロファイルも維持される前提にしないでください.
大切な写真では元ファイルを別に残し,公開・共有する前に出力寸法,見た目,メタデータを用途に応じた別の手段でも確認してください.