Блог

Я пытаюсь использовать jQuery для добавления оттенков серого к каждому изображению, у которого есть класс, но приведенное ниже, похоже, не работает. 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();
 }); 
  

Что вы сейчас делаете неправильно, так это:

• Рисование объекта jQuery, а не холста
• Возвращает URL-адрес данных внутри готового обработчика, который кажется бессмысленным

Что вы должны сделать, это:

• Выполните итерацию по всем элементам изображения, выполнив следующие действия для каждого холста:
  • Создайте версию в оттенках серого
  • Установите для изображения href URL-адрес данных холста в оттенках серого

Например: 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();
    });
});