greyScale.js
画像をグレースケール表示し、マウスを載せるとカラーにしてくれる greyScale.js
今回は、v0.2を使用。
2点ほど躓いたのでやっつけ対処をメモ。
１．ドメインにポートが付いてると動かない。
○ http://localhost/demo/images/01.jpg
× http://localhost:11001/demo/images/01.jpg
○ http://255.255.255.255:11001/demo/images/01.jpg
WEB環境では動いていたので意味合い的には違うかもしれない。
※ちょっと調べてる時間がナイ
■解決策
if (window.location.hostname !== this.src.split('/')[2]) { ↓ if (window.location.hostname !== this.src.split('/')[2].split(':')[0]) {
ポート番号カットしてみた。
２．グレースケール画像が対象画像に載らない。
ローカル環境では問題なかったが、WEBに上げた途端
一番最後の画像の部分にcanvasが全て作成されてしまっていた。
■解決策
function greyScale(image, width, height) { can = $('<canvas>') ↓ function greyScale(image, width, height) { var can = $('<canvas>')
グローバル変数だったのでスコープを指定してみた。
