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

测试对铬，它似乎是文件：//方案，打破它。当我将脚本移动到本地服务器（http：//）而不是运行该文件（file：//）时，它可以工作！

证明：

Answer 2

我刚刚试过这个例子，它似乎对我很好。我得到了负面/倒置的图像呈现。使用Firefox 10.0.2