HTML5圖片黑白轉換效果

這個示例的目的是向你展示如何使用HTML5和jQuery創建一個灰度/彩色圖像的鼠標懸浮效果。在HTML5出現前，實現這個效果需要兩幅圖像，彩色的和灰度的版本。現在HTML5讓創建這個效果更加容易和高效，因為灰色圖像將會直接從原始文件生成。我希望你會發現這個腳本在例如陳列櫥或者相片冊的設計里相當有用。

下面的jQuery代碼會找尋目標圖像並生成一個灰度的版本。當鼠標懸浮在圖像上，代碼將會把灰度圖像漸變為彩色的。

1. <mce:scriptsrc=jquery.min.jsmce_src=jquery.min.jstype=text/javascript></mce:script>
2. <mce:scripttype=text/javascript><!--
4. //Onwindowload.Thiswaitsuntilimageshaveloadedwhichisessential
5. $(window).load(function(){
7. //Fadeinimagessothereisn'tacolorpopdocumentloadandthenonwindowload
8. $(.itemimg).fadeIn(500);
10. //cloneimage
11. $('.itemimg').each(function(){
12. varel=$(this);
13. el.css({position:absolute}).wrap(<divclass='img_wrapper'style=display:inline-blockmce_style=display:inline-block>).clone().addClass('img_grayscale').css({position:absolute,z-index:998,opacity:0}).insertBefore(el).queue(function(){
14. varel=$(this);
15. el.parent().css({width:this.width,height:this.height});
16. el.dequeue();
17. });
18. this.src=grayscale(this.src);
19. });
21. //Fadeimage
22. $('.itemimg').mouseover(function(){
23. $(this).parent().find('img:first').stop().animate({opacity:1},1000);
24. })
25. $('.img_grayscale').mouseout(function(){
26. $(this).stop().animate({opacity:0},1000);
27. });
28. });
30. //Grayscalewcanvasmethod
31. functiongrayscale(src){
32. varcanvas=document.createElement('canvas');
33. varctx=canvas.getContext('2d');
34. varimgObj=newImage();
35. imgObj.src=src;
36. canvas.width=imgObj.width;
37. canvas.height=imgObj.height;
38. ctx.drawImage(imgObj,0,0);
39. varimgPixels=ctx.getImageData(0,0,canvas.width,canvas.height);
40. for(vary=0;y<imgPixels.height;y++){
41. for(varx=0;x<imgPixels.width;x++){
42. vari=(y*4)*imgPixels.width+x*4;
43. varavg=(imgPixels.data[i]+imgPixels.data[i+1]+imgPixels.data[i+2])/3;
44. imgPixels.data[i]=avg;
45. imgPixels.data[i+1]=avg;
46. imgPixels.data[i+2]=avg;
47. }
48. }
49. ctx.putImageData(imgPixels,0,0,0,0,imgPixels.width,imgPixels.height);
50. returncanvas.toDataURL();
51. }
53. //--></mce:script>

* 引用jQuery.js

* 粘貼以上的代碼

* 設置目標圖像（例如.post-img, img, .gallery img等等）

* 你可以更改動畫的速度（例如1000=1秒）

可以工作在任何支持HTML5和Javascript的瀏覽器上，例如Chrome、Safari和Firefox。如果瀏覽器不支持HTML5，這個效果將會退回到原始的彩色圖片。注意：如果本地文件在Firefox和Chrome上不工作，你必須要把HTML代碼放到一個Web服務器上。