CSSで間違い探しを解く

Tags: reading webdev

Hacker News経由で読んだ記事。2枚のよく似た絵から違いを見つけ出す、いわゆる「間違い探し」を、CSSのfilter機能を使って解くというもの。

原理は単純で、一枚目の絵はふつうに表示しておいて、二枚目の絵をCSSのfilter機能のinvert(100%)で色を反転させて、opacity(50%)で半透過させた状態で、一枚目の絵の上にぴったり重ねるように配置するだけ。簡単だけど、これで画像のdiffが取れるとは思いつかなかった。CSS filterは画像だけでなく普通の要素にも適用できるので、DOM要素を複製すれば「visual diff」も取れるとのこと。

こういうのを見ると自分でも試してみたくなりますな。というわけで、難しいと評判サイゼリヤのキッズメニューの間違い探しをネタにやってみました。輪郭抽出みたいになってしまっているのは、元絵がJPEGなために画素単位で色成分が一致していないからか、あるいは切り出しの時点でずれているためなのか。「次の画像」ボタンを押すと、過去に出題された問題を順番に切り替えられるようにしています。

なお、元記事ではFirefox 34以前ではCSS filterが使えないために代わりに「SVG filter」を使うようにしているようだけど、Firefox 35からは(vender prefixなしで)CSS filterが使えるようなので、このサンプルではそちらを使っています。

元絵

diff結果