HTML5 Imagen Efecto de conversión en blanco y negro

El propósito de este ejemplo es mostrarle cómo crear un efecto de suspensión del mouse de una imagen de escala de grises/color utilizando HTML5 y jQuery. Antes de que apareciera HTML5, lograr este efecto requirió dos imágenes, versiones de color y escala de grises. HTML5 ahora hace que la creación de este efecto sea más fácil y más eficiente, ya que las imágenes grises se generarán directamente a partir del archivo original. Espero que encuentre este script útil en diseños como gabinetes de exhibición o álbumes de fotos.

El siguiente código jQuery buscará la imagen de destino y generará una versión en escala de grises. Cuando el mouse se suspende en la imagen, el código cambiará gradualmente la imagen de la escala de grises a color.

1. <MCE: scriptsrc = jQuery.min.jsmce_src = jQuery.min.jstype = text/javascript> </mce: script>
2. <MCE: scriptType = text/javaScript> <!-
4. //Onwindowload.
5. $ (ventana) .load (function () {
7. // FadeIniMagessothereis noColorpOpDocumentLoad y ThenonWindowLoad
8. $ (. Itemimg) .fadein (500);
10. // Cloneimage
11. $ ('. Itemimg'). Cada (function () {
12. varel = $ (esto);
13. el.css ({posición: absoluto}). wrap (<divclass = 'img_wrapper'style = display: inline-blockmce_style = display: inline-block>). clone (). addClass ('img_grayscale'). css ({posición: absoluto, z-odex: 998, opacidad: 0}). insertbefore (el) .queue (function () {
14. varel = $ (esto);
15. El.Parent (). CSS ({ancho: this.width, altura: this.Height});
16. el.dequeue ();
17. });
18. this.src = GrayScale (this.src);
19. });
21. // FadeImage
22. $ ('. Itemimg'). Mouseover (function () {
23. $ (this) .parent (). find ('img: primero'). stop (). Animate ({Opacidad: 1}, 1000);
24. })
25. $ ('. IMG_GRAYSCALE'). MouseOut (function () {
26. $ (this) .stop (). Animate ({Opacidad: 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. para (varar = 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>

* Cita jQuery.js

* Pega el código anterior

* Establezca la imagen de destino (por ejemplo .post-img, img, .gallery img, etc.)

* Puede cambiar la velocidad de la animación (por ejemplo, 1000 = 1 segundo)

Puede trabajar en cualquier navegador que admita HTML5 y JavaScript, como Chrome, Safari y Firefox. Si el navegador no admite HTML5, este efecto volverá a la imagen de color original. Nota: Si el archivo local no funciona en Firefox y Chrome, debe colocar el código HTML en un servidor web.