javascript - キャンバスでの色からグレースケールへの変換

Question

WebOS（enyo）のキャンバスでカラー画像をグレースケールに変換するサンプルコードを試しています。ctx.getImageDataメソッドを使用してピクセルを読み取ると、imageDataにはゼロのみが含まれます。私が使用しているサンプルは、以下のリンクにあります。

http://chopapp.com/#x8t2ymad

WebOSはキャンバスからのピクセルデータの読み取りをサポートしていますか？私はここで何か間違ったことをしていますか？

ロジックとコードについては、次のリンクを参照しました。

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-transition-an-image-from-bw-to-color-with-canvas/

これは正常に機能します。

Answer 1

画像のonloadイベントからのコールバックでgetimagedataを移動する必要があります。

何かのようなもの：

draw: function(image) {
    this.ctx.drawImage(event.target, 0, 0);
    this.greyImage();
},

イベントをバインドした後にソースを設定します

image.onload = enyo.bind(this, "draw");
image.src = "images/image.png";

競合状態を回避するため

これで、実際のピクセルがロードされる前にimagedataが取得されます。その結果、空の配列になります。