使用HTML5畫布的jQuery - BW效果

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

此外，如果你想有一個 '插件和播放' jQuery插件爲你做到這一點，需要看看this jQuery plugin that desaturates the image for you。

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/