2012-06-22 21 views
5

ファイル名が異なる2つのイメージファイルを比較する方法はありますか?だから私は彼らがjavascriptと同等であるかどうかを調べるために探しています。これは可能ですか?Javascriptで2つの画像を比較することはできますか?

この用途には: ライトボックスにポップアップする必要のある画像ギャラリーがあります。ライトボックスが開いたら、私はコールバックにフックをかけて重複した画像を確認し、見つかったらライトボックスのギャラリーからそれらを取り除き、ユーザーは繰り返し画像を見ないようにします。

+0

JavaScriptがファイルシステムにアクセスしないと考えると、いいえ。 –

+0

どのような比較をしようとしていますか? – nullpotent

+0

ファイル名が異なる場合でも2つの画像が同じかどうかを確認しようとしています。 –

答えて

5

私はあなたにできると思います。擬似コード:

  • 画像は同じ幅と高さを持っているかどうかをチェックします。そうでない場合、同じであることはできません。
  • 両方の画像を並べて表示するキャンバスを作成します。
  • キャンバスに画像を描画します。
  • pixel-for-pixelを比較します。 getPixel from HTML Canvas?
  • 1つのピクセルが一致しなくなるとすぐに中断することを覚えておいてください。
  • 最悪の場合のランタイムは、画像が実際に等しい場合に発生するO(wh)になります。
+0

うん、ちょうど私が入力の過程にあった。それはうまくいくだろうが、非常に多くの画像のために非常に遅いだろう。 –

+0

Hmmm、私はもっと良いアプローチは、AJAXとPHPを使って比較を行うことだと思います.JSを使っているのはかなり複雑です。 –

+0

PHPはピクセル単位でも比較する必要があります。それをユーザーのマシンに配布するのではなく、サーバーに負荷をかけるだけです。 –

0

サイズが等しいかどうかを確認してください。

また、幅と高さを確認することも忘れないでください。

To find image file size

+0

2つの画像は視覚的に同一で、異なるファイルサイズを持つことができます。フル-RGB PNG画像とIndexed-PNGの同じ画像を比較します。そのIndexed-PNG画像と、パレット内の未使用の色を比較する。 –

+0

私に例をあげてください、私はそれについて無力です。 – totten

+0

http://adamhaskell.net/img/imgsize/同じ画像を3回、異なる保存方法、異なるファイルサイズ、同じフォーマット。 –

0

タイラーが正しい、あなたは、ユーザーの同意なしにファイルシステムにアクセスすることはできません。

しかし、あなたは、URLを使用するか、アップロードフィールドを使用することにより、例えばJavaScriptコードに用意されていた画像を、比較したい場合は、このSO質問チェックアウトする必要があります:Compare two Images in JavaScript

を基本的に、あなたは画像を変換canvas要素に変更し、base64の値を使用して、その文書のチェックサムをチェックして文書が「有効」であるかどうかを確認するのと同じ方法で、2つを比較します。

関連する問題