HTML

RE:【ネタバレあり】おうちdeサイゼ!Javascriptで間違い探し (15分!ライブラリ不要!)

  • このエントリーをはてなブックマークに追加

久しぶりシステム担当の記事です…

最近、社内でPhotoshopを使ってサイゼリヤの間違い探しを解いたのですが、
前回の話「【ネタバレあり】おうちdeサイゼ!大人の間違い探しの答え」に続き、15分くらいあれば簡単なJavascriptを使って、探せるじゃないかとチャレンジしてみました。

しかもライブラリを使わず、簡単なJavaScriptのみのプログラムで実装したいと思います!

まずは、Photoshopで探すのと同じ要領で、違う画像を2つのLayer分けて重ね、差分を見つけます。

[待ちきれない方はこちらです]

早速紹介します。

今回はhtml canvasを使います。

1. html canvasを初期化する

2. 画像を読み込みと表示

ここまでは一般的な画像表示方法ですが、画像データを繰り返し使いたい場合、
pass by referenceが必要になるので、変数をobjectに変えます。

※ポイントは画像のwidth、heightとデータ(grey)を覚えるobjectに変えます。
※特にgreyはカラーデータをモノクロデータに変換した後に使います。

3. 色をモノクロに

4. 2つ画像を比べる関数を作る

5. 結果を表示する

6. 結果を良くするためには調整が必要です。

携帯で撮った写真なので、少しpixelがずれてます、それをソースで改善してみました。
違うモニターにも見やすくために白黒を調整しました。

15分で作って見ましたが、調整いろいろ含めて30分に掛かりました。
最終結果はこちらになります、悪くはないでしょうね。

[実際サンプルはこちらです]

最終ソースコードはこちらです。

  • このエントリーをはてなブックマークに追加