3 maneras de transformar las fotos de tu web a blanco y negro

Siempre he sido fan de la fotografía en blanco y negro, porque pienso que les dota de un estilo más artístico. Muchos editores de fotografías como Photoshop te brindan la oportunidad de convertir tus imágenes llenas de color a escala de grises de manera sencilla. En dichos editores, incluso tenemos la opción de ajustar la profundidad de color y los tonos de la imagen. Desgraciadamente, no es tan sencillo hacer esto en la web debido a las grandes diferencias en las capacidades de cada navegador.

En este artículo, te vamos a mostrar algunos métodos que puedes aplicar en tu web para transformar las imágenes que tengas subidas a blanco y negro. También veremos las desventajas de adaptar cada uno de los métodos y, cerca del final del artículo, vamos a combinar estos métodos para conseguir una imagen en escala de grises que sea soportada por diferentes navegadores.

Filtros de CSS

Utilizar la propiedad de CSS filter es, quizá, la forma más sencilla de convertir una imagen en escala de grises. En mis tiempos, Internet Explorer era propietaria de una propiedad de CSS llamada filter que aplicaba efectos personalizados incluyendo la escala de grises.

Hoy, la propiedad filter es parte de las especificaciones de CSS3, y es soportada por muchísimos navegadores como Firefox, Chrome y Safari. Por otro lado, Webkit también cuenta con una propiedad filter propia, no solo útil para convertir una imagen a escala de grises, sino a otros efectos como sepia o desenfocado.

Podemos añadir la siguiente regla de estilo para convertir imágenes a escala de grises con la propiedad filter:

img {
    -webkit-filter: grayscale(1); /* Webkit */
    filter: gray; /* IE6-9 */
    filter: grayscale(1); /* W3C */
}

Este código funcionará en navegadores IE6+ y navegadores Webkit (Chrome, Safari y Opera).

Javascript

La segunda alternativa es utilizar Javascript, como no. Javascript, tecnicamente, debería funcionar en todos los navegadores que lo tengan habilitado, incluyendo IE6 y anteriores.

Aquí tienes el código propiedad de Ajax Blender

var imgObj = document.getElementById('js-image');
function gray(imgObj) {
    var canvas = document.createElement('canvas');
    var canvasContext = canvas.getContext('2d');
     
    var imgW = imgObj.width;
    var imgH = imgObj.height;
    canvas.width = imgW;
    canvas.height = imgH;
     
    canvasContext.drawImage(imgObj, 0, 0);
    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
     
    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg; 
            imgPixels.data[i + 1] = avg; 
            imgPixels.data[i + 2] = avg;
        }
    }
    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
}
imgObj.src = gray(imgObj);

Utilizando este método de Javascript, seremos capaces de aplicar el efecto de escala de grises bajo ciertas condiciones, como por ejemplo cuando posemos el ratón encima de una imagen o cuando se haga clic. Podemos utilizarlo también junto a animaciones de jQuery para dotar de más dinamismo cuando apliquemos el efecto de color. Lo único malo que le veo a este método es que, si un usuario tiene deshabilitado Javascript, no funcionará. Pero, en estos días, ¿quién navega por Internet con Javascript deshabilitado?

SVG

Otra manera de llevar a cabo esto es utilizando filtros SVG. Todo lo que necesitas es crear un archivo SVG, y poner las siguientes líneas de código en él. Guárdalo y renombra el fichero con el nombre, por ejemplo, de gray.svg.

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

Ahora que hemos utilizado la propiedad filter, podemos enlazar nuestro SVG al elemento que queramos aplicar un blanco y negro, tal que así:

img {
    filter: url('img/gray.svg#grayscale');
}

También puedes embeberlo directamente desde el CSS de esta manera:

img {
    filter: url('url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/>#grayscale");')
}

Ambas maneras, devolverán el mismo resultado.

Conclusión

Para que nuestra imagen en blanco y negro sea compatible con todos los navegadores, habría que aplicar todos los métodos, anteriormente mencionados, juntos, haciendo uso del siguiente snippet. Este código aplicará la escala de grises a casi todos los navegadores habidos y por haber.

img {
    -webkit-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
    filter: grayscale(100%);
 
    filter: url('../img/gray.svg#grayscale');
    filter: gray;
}

Podemos utilizar el código anterior, junto con el método de Javascript y que el CSS solamente actúe en el caso de que el Javascript esté deshabilitado en el navegador del visitante. Esto se puede llevar a cabo facilmente con la ayuda de Modernizr.

Modernizr añadirá la clase js en el body, si Javascript está habilitado. Cambiará el nombre de la clase a no-js en el caso de que esté desactivado. Con CSS, puedes hacer lo siguiente:

.no-js img {
    -webkit-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
    filter: grayscale(100%);
 
    filter: url('../img/gray.svg#grayscale');
    filter: gray;
}

Fuente: hongkiat.com