使用JavaScript向类中添加灰度fx？

我试图使用jQuery向每个具有类

灰度

的图像添加灰度fx，但下面的方法似乎不起作用。有人知道为什么这可能不起作用吗

    $(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();
 }); 

$（函数（）{
var imgObj=$（'.greyscale'）；
var canvas=document.createElement（'canvas'）；
var canvasContext=canvas.getContext（'2d'）；
var imgW=imgObj.宽度；
var imgH=imgObj.高度；
canvas.width=imgW；
canvas.height=imgH；
drawImage（imgObj，0,0）；
var imgPixels=canvasContext.getImageData（0,0，imgW，imgH）；
对于（变量y=0；y

您当前的错误是：

• 绘制jQuery对象而不是画布
• 在就绪处理程序中返回数据URL，这似乎毫无意义

你应该做的是：

• 迭代所有图像元素，对每个画布执行以下操作：
  • 制作灰度版
  • 将图像

    href

    设置为灰度画布的数据URL

比如：

$（窗口）.load（函数（）{//等待图像也加载
var imgObj=$（'.greyscale'）；
返回imgObj.each（函数（）{
var canvas=document.createElement（'canvas'）；
var canvasContext=canvas.getContext（'2d'）；
var imgW=此宽度；
var imgH=此高度；
canvas.width=imgW；
canvas.height=imgH；
drawImage（this，0，0）；
var imgPixels=canvasContext.getImageData（0,0，imgW，imgH）；
对于（变量y=0；y

我拥有的是一个灰度级的图像，我想将其移动到画布上，然后将画布转换为灰度级。请查看为什么您认为画布与图像不一样？@Chill Web Designs:您可以尝试使用

$（窗口）。加载

而不是就绪处理程序吗？必须首先加载图像，

ready

函数（

$（function（）{}）

）不等待图像，而只等待DOM。发现问题后，它会获得真实的图像大小，而不是CSS中指定的大小。请注意，如果页面未托管在服务器上，则getImageData将无法工作。

$(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();
    });
});