ImageLab

使い方 ← ImageLab を開く
ImageLab は、画像処理の「中身」をその場でつまみを動かして見るための道具です。
レタッチソフトの〈ぼかし〉や〈シャープ〉のボタンの内側で何が起きているのかを、 数式ではなく絵の変化で確かめられます。写真を仕上げるための道具ではありません。

読み込んだ画像は、お使いのブラウザの中だけで処理されます。どこにも送信されず、保存もされません。 インストールも会員登録も不要です。

3分で分かる触り方

  1. 絵を用意する。ヘッダの「サンプル」から選ぶのがいちばん早いです。 自分の写真で試すなら[画像を開く]か、画面にドラッグ&ドロップしてください。
  2. 左のリストから処理を1つ選ぶ。迷ったら〈トーンカーブ〉か〈平均化 / ガウシアン〉から。
  3. 右の「パラメータ」のつまみを動かし、32 を交互に押す。 3 が処理前、2 が処理後です。パタパタ切り替えると、何が変わったのかがはっきり分かります。

右の「解説」には、その処理の原理・式・見どころが書いてあります。ここがこの道具の本体だと思ってください。

画面の見方

場所中身
処理のリスト。カテゴリごとに 22 の処理が並んでいます
中央絵。まん中の縦線(丸いつまみ)をドラッグすると、左が処理前・右が処理後の境目が動きます
上が「パラメータ」(つまみ)、下が「解説」
ヒストグラム(明るさの分布)/ラインプロファイル(1行ぶんの明るさの断面)/計算時間

ルーペ

マウスを絵の上に乗せると拡大鏡が付いてきます。倍率は下のスライダーで変えられます。 まん中の赤い枠が1画素です。デモザイクやノイズの粒を見るときに使います。

キーボード

キーはたらき
1分割表示(左が処理前・右が処理後)
2処理後だけを表示
3処理前(原画)だけを表示
4差分表示。処理が実際に足し引きした量だけが見えます

23 の往復がいちばん使います。変化が小さい処理ほど、この往復でしか分かりません。

何ができるのか ── 写真のお悩み6景

最初の入口としておすすめの6つです。左のリストから選んで、32 で往復してみてください。

お悩み使う処理見えること
逆光で手前が真っ黒 トーンカーブ
CLAHE
空を白飛びさせずに、影の中だけを起こせます。全体を明るくするのとは別ものです
暗い場所でザラつく ノイズ除去の比較 ぼかせば粒は消えますが、顔や看板もぼけます。バイラテラルなら輪郭を残して粒だけ取れます
なんとなく眠い・甘い アンシャープマスク 「シャープ」の正体は、ぼかした絵との差を元に足し戻しているだけ、と分かります
雑誌をスキャンしたら網目が出た ノイズ付加(周期)
→ スペクトルマスク
写真を「模様の楽譜」に開いて、縞の音符だけ塗って消し、また戻します。いちばんの見どころ
広角で建物が歪む・傾く レンズ歪みと補正
アフィン変換
曲がった柱がまっすぐ戻ります。傾き直しは画素の作り直しでもある、と分かります
影の落ちた書類が読めない 二値化(大津/適応的) 写真全体で1つの境目を決めると潰れます。画素ごとに決めれば読めます

このほかに、エッジ検出(Sobel、Canny の6段階表示)、周波数フィルタ、モルフォロジー、 デモザイク(Bayer 配列 → バイリニア vs AHD)などが入っています。全部で 22 の処理です。

よくある質問

読み込んだ写真は、どこかに送られますか?

送られません。処理はすべてブラウザの中で行われます。サーバへの送信も、保存もしていません。 このページを開いたあとはネットを切っても動きます。

写真を読み込んだあと、うっかり F5 を押してしまいました

写真は消えます。ブラウザの中にしか無いためです。読み込み直してください。 処理を切り替えるのに再読み込みは要りません。左のリストから選ぶだけです。

重い処理で画面が固まりませんか?

固まりません。重い処理はブラウザの裏方(Web Worker)が複数のコアで分担します。 右下の「実行」の欄に Worker 8 並列 のように出ます。計算中も、途中経過が上から順に降りてきます。

結果を保存できますか?

ヘッダの[PNG保存]で、いま表示している絵を保存できます。

もっと大きく/細かく見たい

ヘッダの「作業解像度」を上げてください。既定は長辺 640 で、これはつまみを動かしながら 見せられる速さを優先した設定です。細部を見るときだけ 1024 以上にするのがおすすめです。

見せたい状態を、そのまま人に送れますか?

できます。アドレスの後ろにハッシュを付けると、その状態で開きます。

index.html#op=fftmask&sample=periodic … スペクトルマスクを、周期ノイズのサンプルで開く

ネットにつながっていない場所(Zoom の実演など)で使えますか?

使えます。GitHub のページから一式をダウンロードして、 index.html をダブルクリックしてください。サーバもインストールも不要です。

もっと詳しく

見るもの中身
処理解説(22処理ぶん)原理・式・見どころを1ページにまとめたもの(アプリの解説パネルと同じ文章)。目次つき
GitHub リポジトリソースコード一式と、作りの解説。外部ライブラリは1つも使っていません(FFT も自前です)
_selfcheck.html開発用。22処理 × 10サンプルを総当たりで動かして、例外が出ないかを確かめるページ