javascript canvas putImageData不寫修改後的數據

Question

我試圖去飽和一個圖像。我目前正在加載它，解析圖像數據，但我無法將它寫回畫布。

我已經照着所有的方向做

context.putImageData(imagedata,0,0); 

我這樣做，但圖像數據並沒有改變。 「ctx」是以前加載的圖像的上下文，該圖像正在變爲灰度。

greyscale: function grayscale(ctx){ 

     var id = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height); 

     for(var i=0; i<id.height; i++){ 
      for(var e=0; i<id.width; i++){ 

       var index = (e*4)*id.width+(i*4); 

       var avg = (id.data[index] + id.data[index+1] + id.data[index+2])/3 

       id.data[index] = avg;  
       id.data[index+1] = avg; 
       id.data[index+2] = avg; 
      } 
     } 

     ctx.putImageData(id,0,0); 

    } 

Answer 1

你的內在循環是比較和遞增我而不是e。

當您計算索引時，您還可以切換e和i。它應該是（與4分解出來）：

var index = 4 * (i*id.width + e); 

Answer 2

也許不是你尋求的答案，但你看過flot.js嗎？漂亮的製圖功能和源代碼可供細讀。

Answer 3

的問題是在這裏：

for(var e=0; i<id.width; i++){ 

你的 「E」 就是不漲