colorear parte de una imagen con canvas

Colorear parte de imagen con Canvas

Hace unos días publiqué una entrada en la que explicaba cómo hacer uso de la propiedad CSS mix-blend-mode para conseguir colorear parte de una imagen. Pero como suele ocurrir frecuentemente, los navegadores de Microsoft se han quedado atrás en la adopción de esa propiedad a pesar de ser una recomendación oficial, así que la solución planteada no funcionaba correctamente en ellos. En esta ocasión ampliaremos lo explicado anteriormente para ofrecer una solución que cubre todos los navegadores recientes.

Como ya teníamos una solución válida para la mayoría de los navegadores, lo primero que haremos es detectar si el navegador soporta los efectos de fusión de capas por CSS, para ofrecerle una solución alternativa en caso contrario. Y como siempre que queremos detectar si el navegador soporta o no determinada propiedad, lo mejor es echar mano de Modernizr.

modernizr

Para construir nuestro script de detección de propiedades, seleccionamos “CSS Background Blend Mode” y pulsamos el botón “Build”. Eso es todo, no necesitamos detectar nada más. En nuestro caso lo hemos renombrado como modernizr-backgroundblend.js

La página

La idea es seguir conservando la versión anterior en aquellos navegadores en los que funciona, y ofrecer una alternativa a través de canvas para los demás. Es cierto que la opción basada en canvas funcionaría correctamente en todos los navegadores recientes, pero mantendremos también la versión anterior por razones de rendimiento.

Si lo comparas con la solución planteada en la entrada anterior verás que la parte

es esencialmente idéntica y que todo lo nuevo ha sido añadido si no se cumple la condición (else).
También verás que hemos cambiado $(document).ready(function() { por $(window).load(function() {
Esto es así porque necesitamos asegurarnos de que las imágenes han sido cargadas para poder hacer operaciones con ellas.

La programación para crear un efecto multiply aplicando un color a una imagen se basa directamente en lo explicado en esta página añadiéndole algunas variaciones. En primer lugar lo hemos “empaquetado” en una función (redraw), y le hemos añadido una nueva función (hexToRgb) para convertir los valores devueltos por el selector de colores al formato de array [r,g,b] que necesita.

Como necesitamos poder aplicar la función múltiples veces, dentro de la misma usamos la expresión jQuery $('#tshirt_container canvas').remove(); para eliminar el elemento canvas antes de volverlo a recrear.

El CSS

Modernizr también introduce las clases  .backgroundblendmode y .no-backgroundblendmode para poder realizar selecciones en nuestro CSS basados en la detección de esta propiedad. Nuestro CSS queda prácticamente idéntico al del ejemplo anterior, pero aprovechamos para añadir la propiedad CSS mix-blen-mode: multiply solo en el caso de estar soportada.

El resultado

Aquí tienes el resultado de todo el código anterior. Puedes usar el botón “Descargar” al final de la página para bajarte una copia con todos los scripts, estilos y archivos necesarios.

t-shirt backgroundguy with t-shirt