tshino / compare Goto Github PK

キーボードのTABキーで画像を一枚ずつ切り替え表示ができるようにする。

画像を並べて表示しているときにTABキーを押したら、一枚だけ表示するレイアウトに切り替えます。
さらにTABキーを押していくことで、画像を順番に切り替えられます。

画像の切り替えは数字キーでもできますが、
正しい数字キーを順番に押さなければいけない煩わしさがありました。
TABキーに対応することで、数字キーよりも簡単に切り替え操作ができるようにします。

また、ブラウザ上でTABキーは通常ボタンやリンクなどのフォーカス移動に割り当てられていますが、
おそらくダイアログ表示中以外はTABキーが必要になる局面は少ないので、
アプリの機能に割り当てることにします。

2つの画像の間のオプティカルフローを計算して表示する機能を追加する。

OpenCVに含まれるLucas-Kanade法のアルゴリズムを使用して疎なオプティカルフローを生成します。
動画の連続するフレームを比較する場合のように移動量が少ない場合だけでなく、もっと大きく動いている場合にも使えるように画像ピラミッドも利用します。

Make the grid interval customizable on the settings dialog.
Currently the main grid interval is 100 pixels, and the sub grid interval is 10 pixels.

アルファチャンネル付きの画像の場合、チャンネルビューでアルファチャンネルも選べるようにする。

CanvasのgetImageData()を使う現在の実装では、
画像にアルファチャンネルが含まれるかどうかを判別することは出来ないため、
簡易的にアルファ付きPNGかどうかで判別することにします。

クロスカーソルの白線が白い画像の上では見えづらいという問題を直すため、
白線のデザインを調整する。

案としては、点滅させる、白黒の組み合わせにする、薄い影を足すなどを検討しています。

画像ファイルの色形式判別など、わりと複雑でバグが混入しやすい処理が増えてきたので、テストを書くことを始めたい。

試しに書いてみたテストがすでに/test/test.htmlにあります。HTML上でconsole.assertを呼ぶだけの超簡易テストですが、ないよりマシなのでよしとします。
このIssueでは、最近追加した画像ファイルの色形式判別処理（#32）の単体テストを書くことを目標にします。
テストのために必要になるデータ（いろいろな色形式の画像ファイル）を作成することも課題になります。

ヒストグラム計算などの画像処理のテストを書く。

テストのフレームワークはすでに #34 で作ってあるものを使います。

拡大したときにピクセルがはっきり見えるようにする機能を追加する。

現在の実装では、画像を拡大していくとピクセルの色が補間されてぼやけていくため、1つ1つのピクセルの色や並びを観察するには不都合です。
そのような観察のためには、拡大しても色が補間されずにピクセル1つ1つが四角い形で見えるようになれば良いはずです。
そこで、そのような拡大表示が出来るようにします。
また、常にこの拡大方法が望ましいとは限らないので、ユーザーが選択できるようにします。

なお、画像の拡大方法を制御するimage-renderingというCSSプロパティは、まだ一部のブラウザのみが対応しているようなので、非対応ブラウザの考慮も必要になります。

2つの画像を比較してトーンカーブを生成（推定）する機能を追加する。

これは、Photoshopなどで色調やレベルの補正をした画像があったときに、元の画像と処理後の画像を比較することで、どのようなトーンカーブを適用したのかを後から推定する機能です。
あるいは、複数のカメラで撮った写真の色を一致させるために、どのようなトーンカーブを適用すれば良いかを計算で推定する、という使い方も想定します。

うまくいくか不明ですが、以下のアイデアを検討中。

• ヒストグラムを使って、互いの同じ累積度数を持つ輝度を対応させてグラフ化する方法。
• 互いの同じ位置のピクセルの輝度をXYプロットする方法。
• 色調補正時のディザやノイズの影響を抑えるため、縮小した画像を用いて比較する。

#32 で追加した「色形式」の情報に含まれるクロマサブサンプリングにおいて判定できる形式の種類を増やす。

すでに4:4:4や4:2:0などの一般的な形式を含む7種類の判定を実装済みですが、判定できないファイルが見つかったため、それを判定できるように拡張します。

Enable to change the background color of the view.

Currently the background is a gray constant color mat.
If you want to compare PNG images that have alpha channel,
it might be useful to overlay them on different color mats.

Add coloring option to Vectorscope figures.

A vectorscope figure with color should look like current implementation of 3D Color Distribution figures.

Add 'settings' dialog to organize settings on this app.
Setting items should be saved to the browser's Local Storage.

2つの画像の間の位置ずれ（どの方向にどれだけ移動したか）を計算する機能を追加する。

この位置ずれ計算機能は単純ですが、あとで「画像のdiff」機能に応用する予定です。
位置ずれを直してから画像の差分を取ることで、「ちょっと賢いdiff」が可能になります。
一般的なテキストのdiffツールでは、行が挿入されたり削除されたとき、
それ以降の行が全部変化したことにはならないようになっていますが、
それを画像でやるイメージです。

• #8 ガウシアンぼかし関数
• #9 ガウシアンぼかしを使って画像を縮小する関数
• #11 画像の畳み込み演算を行う関数
• #12 画像の勾配の近似値を計算する関数
• #10 画像を比較して位置ずれを推定する関数

画像サイズが異なる場合のクロスカーソルの挙動を改善する。

今の実装では、すべての画像に対して同じX座標とY座標を共有しているため、
ある画像ではズームしている画面内にクロスカーソルがあっても、別の画像では画面外になっていたり、
そもそも画像の解像度の範囲外になったりしています。
そこで、画像の幅や高さに対する比率が同じになるような位置を指す仕様への変更を検討中。

負の数値を表示する場所で負号としてハイフンマイナス（ASCIIの'-'）を使っているのをUnicodeにおける適切なマイナス記号（U+2212）に置き換える。

ハイフンマイナス U+002D（HYPHEN-MINUS）は主に英文の単語を繋いだりするハイフンとして使われる文字なので、負号として使うとフォントによっては不自然に短く見えます。
この問題は本アプリの「画質メトリクス」や「オプティカルフロー」のダイアログの中で表示している数値で目立ちます。
UnicodeではU+2212（MINUS SIGN）が適切なマイナス記号なので、これを使うように変更します。

Excellent App!
How I can add web-camera support to this application? I like instead of uploading image, to take a shot from web-cam and crop some part from it.

カラーピッカーによる色の情報が、マウスでポイントしている1つの画像だけでなく、
すべての画像について同時に表示されるようにする。

これによって、色の値の比較が容易にできるようにします。

カラーピッカーによる色情報の数値などを
ブラウザの普通の操作で、テキスト選択、コピーなどができるようにする。

現状はなぜかマウスイベントが透過して、
画像のクリックやドラッグ操作になってしまうため、テキストを選択できません。

モバイル端末のブラウザなどでタッチ入力を使った場合の動作を改善する。

現状だとAndroid版Firefoxを使ったとき、ピンチアウトの操作で画像を拡大したときなどに、画像を長押ししたときに出るポップアップが出てしまう問題があります。

チャンネルビュー（#27）で特定のチャンネル画像を表示する際、グレースケールの代わりにカラースケール（正式な呼称はよく分からないが、よくある青から赤のグラデーション）を使うオプションを追加する。

色を使うことで、細かい階調の変化を観察しやすくなると思います。
画像の細かいノイズをチェックしたいときなどに便利なはず。

Sobelフィルタを使って画像の勾配の近似値を計算する関数を実装する。

これはユーザーが直接使う機能ではなく、
「#7 画像の位置ずれを計算する機能」の処理の中で使う予定です。
Web Workerのスクリプト内で使います。

適当なHTML ValidatorでHTMLの問題をチェックし、改善できるところは改善する。

画像のdiffのズーム状態が勝手に解除される場合がある。

手順

1. 画像を2つ以上ロードして「画像のdiff」を表示
2. 図をズームする
3. 「無視する誤差の大きさ」の数値を変更する --> ここでズームが解除される
4. マウスの左ボタンで画像をドラッグする --> ズーム状態が唐突に復活する

3と4の間でおかしな動作になっています。表示と内部状態に不整合がある模様。

チャンネルビュー（#27）で特定のチャンネル画像を表示する際、地図の等高線と同じような「階調の等高線」を重ねて表示する機能を追加する。

階調の勾配や絶対値を観察したいときに便利なはず。

カラーピッカーによる色情報のHUD（ウィンドウ）と、
そのピクセル位置を示すクロスカーソル（十字）が重ならないように、
HUDの位置が自動的に変わるようにする。

これによって、HUDで隠れている部分をポインタで指定することができない問題を解決します。

Add checkerboard pattern option to background color setting.
It might be useful to view transparent images.

ガウシアンぼかしの関数を実装する。

これはユーザーが直接使う機能ではなく、
「#7 画像の位置ずれを計算する機能」の処理の中で使う予定です。
Web Workerのスクリプト内で使います。

カラーピッカー機能とクロスカーソルについての実装を分離するようにリファクタリングする。

このリファクタリングによって、
クロスカーソルをカラーピッカー以外の用途にも応用できるようにします。
また、クロスカーソルのUIの拡張もやりやすくなるようにします。

カラーピッカー機能をON/OFFするボタンをサイドバーに追加する。

これによって、初めて使うひとにも、この機能の存在が分かりやすいようにします。

画像情報の項目として、ファイルのヘッダから読み取れる範囲で色形式の情報を追加する。

ガウシアンぼかしを使って画像をきれいに縮小する関数を実装する。

これはユーザーが直接使う機能ではなく、
「#7 画像の位置ずれを計算する機能」の処理の中で使う予定です。
Web Workerのスクリプト内で使います。

ヒストグラムなどの図をマウスホイールなどでズームするときの動作を改良する。

現状は、マウスポインタの位置に関係なく、図の**や図の端を中心として拡大縮小するようになっています。
これをマウスポインタの位置、タッチ入力の場合は2本指の間の位置が拡大されるような動作に改良します。
ヒストグラムなどの図ではなく、読み込んだ画像そのもののズームはすでに上記のように改良された動作になっています。今回改良するのはダイアログ形式で表示しているヒストグラムやベクトルスコープなどの図のズームです。

カラーピッカーをタッチ入力のみでも使えるようにする。

キーボード、マウス、タッチのどれを使っても、
すべての機能を使えるようにするのが基本方針です。

特定のチャンネルの画像を表示する機能を追加する。

例えばRGBのうちR成分のみを見比べたい、という場合に使う機能です。

「画像のdiff」機能に位置をずらして比較する「オフセット」オプションを追加する。

ヒストグラムなどの図にグリッド（10%間隔などの罫線）を追加する。

複数の画像のヒストグラムなどの図を目視で見比べるときに、罫線があれば細かいところまで見比べやすくなると思うので、追加してみます。

Sometimes the pictures that are being compared need a cropping. What is the ability to be embedded in the app?

Example: https://fengyuanchen.github.io/cropper/

ピクセルの色を数値（RGB値）で表示する機能。

既にある程度実装済みですが、
マウスでは使えても、タッチ操作で使えないなど、課題が残っています。

• #2 カラーピッカーを並列化する
• #3 カラーピッカーの色情報をテキスト選択可能にする
• #4 カラーピッカー機能をON/OFFするボタン
• #5 色情報のHUDをクロスカーソルと重ならない位置に自動で動かす
• #6 カラーピッカーのキーボード対応
• #14 カラーピッカーのタッチ対応
• #16 クロスカーソルの白線が白い画像の上では見えづらいのを直す
• #17 クロスカーソルの改善：画像サイズが異なる場合の動作

リファクタリング

• #18 リファクタリング: カラーピッカー機能とクロスカーソル機能を分離

カラーピッカーをキーボード入力のみでも使えるようにする。

キーボード、マウス、タッチのどれを使っても、
すべての機能を使えるようにするのが基本方針です。

3次元色分布の図をマウスホイールなどでズーム（拡大縮小）できるようにする。

波形（Waveform）の図の横軸がJPEGの回転情報を反映していないため、画像の縦軸方向に対応している場合がある。また、横軸でも左右反転している場合もありうる。

画像の見た目の横軸と波形の横軸が常に対応するように修正することで、より分かりやすい挙動にします。

画像を比較して位置ずれを推定する関数を実装する。

これはユーザーが直接使う機能ではなく、
「#7 画像の位置ずれを計算する機能」の処理の中で使う予定です。
Web Workerのスクリプト内で使います。

画像の畳み込み演算を行う関数を実装する。

これはユーザーが直接使う機能ではなく、
「#7 画像の位置ずれを計算する機能」の処理の中で使う予定です。
Web Workerのスクリプト内で使います。

画像内に含まれる色を、その量の多い順にリスト形式で見られる機能を追加する。

なんとなく、あったら面白いかも知れないので作ってみます。

ベクトルスコープの3次元版を追加する。

これは色の分布を3次元の立方体（RGB色空間）の中にプロットして、それをマウスなどでグリグリ回転させて観察できるようにする、という機能です。
うまくいったら楽しい機能になりそうな気がしています。

なんという機能名にするべきか、参考になる既存ソフトの例があるのか、まだ調査していません。

Hi
I am a graphic designer and I want to contribute to this project, I think your project need a logo or at least a icon to put as favicon.

Here I made a simple and modern logo:

what do you think? if you like it I will send a PR with svg files.

画像のdiffの図をもっと大きく表示できるようにする。

現状は図を表示する部分が狭くて見づらいという意見があります。
また、オプション設定の部分がかさばっていて、狭い画面では肝心のdiffの図を見るためにスクロールが必要になっています。
レイアウトおよびスタイルシートを見なおして、こうした問題をなんとかします。

Refactor to accept raw image data which is not a file.

Currently every image is imported as a file.
And some features, like file format detection and property detection (color format, Exif orientation), rely on the binary access of image files.
In order to support web camera (#41), since that is not a file, it is required to skip those file access.