ソフトウェア

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分に掛かりました。 最終結果はこちらになります、悪くはないでしょうね。 [実際サンプルはこちらです] 最終ソースコードはこちらです。