jQuery - эффект BW с использованием HTML5 canvas

Question

Как сделать так, чтобы обычное изображение превратилось в черно-белое, когда мышь над ним, и обратно в нормальное изображение, когда мышь отсутствует?

Answer 1

С http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html:

(Комментарии мои)

// create canvas element
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
// assuming imgObj is a DOM representation of your image, get the width    
var imgW = imgObj.width;
// ... and the height
var imgH = imgObj.height;
// set the canvas to the image dimensions
canvas.width = imgW;
canvas.height = imgH;
// draw the image on the canvas
canvasContext.drawImage(imgObj, 0, 0);
// get every pixel in the image
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
// cycle through the pixels vertically
for(>var y = 0; y < imgPixels.height; y++){
     // cycle through the pixels horizontally
     for(>var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          // create an average grayscale color for the pixel
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          // set the pixel to the newly created average color
          imgPixels.data[i] = avg;
          // do the same for the next two pixels
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
     }
}
// overwrite the canvas image with the newly created array of pixels
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
// get a data URL which is to be used in the SRC attribute of the image
return canvas.toDataURL();

Кроме того, если вы хотите, чтобы «plug-and-play» jQuery-плагин сделал это для вас, взгляните на этот плагин jQuery, который обесцветит изображение для вас .

Answer 2

Вот эта функция, как я ее вижу:

    $(document).ready(function(){
        $("img.a").hover(
            function() {
                $(this).stop().animate({"opacity": "0"}, "slow");
            },
            function() {
                $(this).stop().animate({"opacity": "1"}, "slow");
            });

     });

Здесь будет CSS:

div.fadehover {
    position: relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    }

 img.b {
    position: absolute;
    left: 0;
    top: 0;
    }

Я получил это отсюда: http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/