使用JavaScript將greyscale fx添加到類中？

Question

我想使用jQuery將灰度fx添加到每個具有類greyscale的圖像，但下面看起來不起作用。有沒有人有任何想法，爲什麼這可能不工作？

$(function(){ 

     var imgObj = $('.greyscale');  
     var canvas = document.createElement('canvas'); 
     var canvasContext = canvas.getContext('2d'); 
     var imgW = imgObj.width; 
     var imgH = imgObj.height; 
     canvas.width = imgW; 
     canvas.height = imgH; 

     canvasContext.drawImage(imgObj, 0, 0); 
     var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH); 

     for(var y = 0; y < imgPixels.height; y++){ 
      for(var x = 0; x < imgPixels.width; x++){ 
       var i = (y * 4) * imgPixels.width + x * 4; 
       var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3; 
       imgPixels.data[i] = avg; 
       imgPixels.data[i + 1] = avg; 
       imgPixels.data[i + 2] = avg; 
      } 
     } 

     canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 
     return canvas.toDataURL(); 
}); 

Answer 1

你當前做錯了，是：

• 繪製一個jQuery對象，而不是一個帆布
• 返回一個現成的處理程序，這似乎是無意義的內部數據URL

你應該做的是：

• 迭代所有圖像元素，在做每一個帆布以下：
  • 使灰度版本
  • 圖像0​​設置爲灰度帆布

像的數據網址：http://jsfiddle.net/eGjak/140/。

$(window).load(function() { // wait for images to load also 
    var imgObj = $('.greyscale'); 
    return imgObj.each(function() { 
     var canvas = document.createElement('canvas'); 
     var canvasContext = canvas.getContext('2d'); 
     var imgW = this.width; 
     var imgH = this.height; 
     canvas.width = imgW; 
     canvas.height = imgH; 

     canvasContext.drawImage(this, 0, 0); 
     var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH); 

     for(var y = 0; y < imgPixels.height; y++){ 
      for(var x = 0; x < imgPixels.width; x++){ 
       var i = (y * 4) * imgPixels.width + x * 4; 
       var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3; 
       imgPixels.data[i] = avg; 
       imgPixels.data[i + 1] = avg; 
       imgPixels.data[i + 2] = avg; 
      } 
     } 

     canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 
     console.log(canvas.toDataURL()) 
     this.src = canvas.toDataURL(); 
    }); 
});