Canvas: Efecto Imagen escala a gris

closeHola! hace 5 years 11 months 30 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂

Este ejemplo nos muestra como hacer un efecto de escala a gris (Blanco y Negro) sobre una imagen usando canvas. Es un practico código para hacer de nuestros sitios mas impactantes en efectos gráficos, sin necesidad de usar flash :p

Lo primero que hacemos es agregar nuestro CSS a nuestro ejemplo

<style> 
      .img-wrap {
         width: 640px;
         margin: 100px auto;
         position: relative;
         cursor: pointer;
      }
 
      canvas {
         position: absolute;
         top: 0; left: 0;
         -webkit-transition: all 1s;
         -ms-transition: all 1s;
         -o-transition: all 1s;
         -moz-transition: all 1s;
         transition: all 1s;
      }
 
      canvas:hover {
         opacity: 0;
      }
 
      /* If you MUST have IE support */
      #cvs-src {
         filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      }
   </style>

Luego Agregamos el JavaScript necesario en nuestro body

 <script> 
      (function() {
         var supportsCanvas = !!document.createElement('canvas').getContext;
         supportsCanvas && (window.onload = greyImages);
 
         function greyImages() {
            var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'),
            img = document.getElementById('cvs-src'),
            imageData, px, length, i = 0,
            red, green, blue, grey;
 
            ctx.drawImage(img, 0, 0);
 
            imageData = ctx.getImageData(0, 0, 640, 400);
            px = imageData.data;
            length = px.length;
 
            for ( ; i < length; i+= 4 ) {
               // rgbargbargbargba
               grey = 0.3*px[i] + 0.59*px[i+1] + 0.11*px[i+2];
               px[i] = px[i+1] = px[i+2] = grey;
            }
 
            ctx.putImageData(imageData, 0, 0);
         }
      })(); 
   </script>

Y por ultimo nuestro html en nuestro body

   <div class="img-wrap"> 
 
      <img src="imagen.jpg" alt="Imagen" id="cvs-src" /> 
      <canvas width=640 height=400></canvas> 
   </div>

Ejemplo funcionando Aqui!

You may also like...

2 Responses

  1. Alexander dice:

    Hola !!! no sirve cuando son varias imagenes y mas cuando se trabaja con algun tipo de lightbox …

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *