HTML5のピクセル操作が機能していません

Question

色を反転してキャンバスに書き戻すために、画像のピクセルを操作しようとしています。しかし、それは動作していません。コードは次のとおりです。

<script type="text/javascript"> 
<!-- 
window.addEventListener('load', function() { 
    var elem = document.getElementById('myCanvas'); 
    var context = elem.getContext('2d'); 
    var img = new Image(); 

    img.addEventListener('load', function() { 
     var x = 0, y = 0; 

     context.drawImage(this, x, y); 

     var imgd = context.getImageData(x, y, this.width, this.height); 
     var pix = imgd.data; 

     for (var i = 0, n = pix.length; i < n; i += 4) { 
     pix[i ] = 255 - pix[i ]; // red 
     pix[i+1] = 255 - pix[i+1]; // green 
     pix[i+2] = 255 - pix[i+2]; // blue 
     } 

     context.putImageData(imgd, x, y); 
    }, false); 

    img.src = 'test.jpg'; 
}, false); 
// --> 
</script> 

「Test.jpg」はスクリプトと同じフォルダにあります。私は何か不足していますか？同じイメージを反転させることなく表示します。

Answer 1

を使用して、あなたの質問への答えはクロームでテスト

here権利であり、ファイルのように見える：それを壊す//スキーム。スクリプトをファイル（file：//）を実行する代わりに、ローカルサーバー（http：//）に移動すると、うまくいきました。

証明：

Answer 2

私はその例を試しましたが、それは私のためにうまくいくように思えました。私は否定/反転画像をレンダリングしました。 Firefoxの10.0.2