ドレスデンの風景 getImageDataにはまる

画像データからピクセル情報を呼び出して、前回作成したタイルで表現してみました。

画像ファイルからピクセル情報を呼び出してタイルを貼り付けたサンプルです。

 

ソースリスト

https://github.com/suginoha/page/tree/master/html5

 

ローカル環境だとpixel.htmlファイルの35行目

var pixel = ctx2.getImageData(x, y, 1, 1);

ここでローカル画像のデータ取得できないというワナにはまりました。

 

サーバーに上げると取得できました。

 

＜参考文献＞

Canvas とピクセル操作

スタイルと色を適用する

getimageDataを使ってもローカル環境だと画像が上手く読み込めません