HTML5 picture black and white conversion effect

The purpose of this example is to show you how to create a mouse suspension effect of a grayscale/color image using HTML5 and jQuery. Before HTML5 appeared, achieving this effect required two images, colored and grayscale versions. HTML5 now makes creating this effect easier and more efficient, as grey images will be generated directly from the original file. I hope you will find this script useful in designs such as display cabinets or photo albums.

The following jQuery code will look for the target image and generate a grayscale version. When the mouse is suspended on the image, the code will gradually change the grayscale image to color.

1. <mce:scriptsrc=jquery.min.jsmce_src=jquery.min.jstype=text/javascript></mce:script>
2. <mce:scripttype=text/javascript><!--
4. //Onwindowload.Thiswaitsuntilimageshaveloaded whichissential
5. $(window).load(function(){
7. //Fadeinimagessothereisn'tacolorpopdocumentload and thenonwindowload
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>

* Quote jQuery.js

* Paste the above code

* Set the target image (for example .post-img, img, .gallery img, etc.)

* You can change the speed of the animation (for example, 1000=1 second)

Can work on any browser that supports HTML5 and Javascript, such as Chrome, Safari, and Firefox. If the browser does not support HTML5, this effect will fall back to the original color image. Note: If the local file does not work on Firefox and Chrome, you must put the HTML code on a web server.