(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Imagen en escala de grises con canvas y HTML5

HTML5 y CSS3
Principiante
10 minutos

En este tutorial vamos a implementar una funcionalidad que nos va a permitir que las imágenes de nuestro site puedan pasar de un estado en RGB a escala de grises de una forma sencilla y clara con usando un poco de JS y diferentes librerías. En nuestro código no estará directamente la etiqueta de <canvas> pero sí nos la generará la librería y por eso es importante que tengamos definido el DOCTYPE como HTML5.

Para conseguir este efecto tendremos que usar, además de jQuery, una librería que ha desarrollado Andrew Pryde para hacernos la vida más fácil. Así que iremos al repositorio de Github y nos descargaremos la librería.

Lo primero que vamos a hacer es crear nuestro documento HTML5.


<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery GreyScale Plugin</title>
</head>
<body>
<section>
<img src="http://www.imaginagroup.com/wp-content/themes/starkers/images/imaginagroup-logo.png" alt="Image" />
</section>

</body>
</html>

Una vez tenemos definida la imagen o imágenes a las cuales les vamos a añadir el efecto, es hora de que le demos algunos estilos básicos únicamente para que visualmente se muestre de forma correcta:


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Asection%7B%0Abackground%3A%20url('images%2Fbg-header-footer.png')%20repeat%20scroll%200%200%20black%3B%0A%7D%0A%0Aa%20%7B%0Adisplay%3A%20block%3B%0Atext-align%3A%20center%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

Es la hora de darle la funcionalidad y para eso tendremos que llamar primero a jQuery y después a la librería que nos facilitará nuestro buscado efecto.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery GreyScale Plugin</title>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Asection%7B%0Abackground%3A%20url('images%2Fbg-header-footer.png')%20repeat%20scroll%200%200%20black%3B%0A%7D%0A%0Aa%20%7B%0Adisplay%3A%20block%3B%0Atext-align%3A%20center%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>
<section>
<img src="http://www.imaginagroup.com/wp-content/themes/starkers/images/imaginagroup-logo.png" alt="Image" />
</section>

</body>
</html>

Después de tener los JS bien llamados y en su carpeta correspondiente, vamos a colocar la función de jQuery donde podremos definir varios parámetros a la hora de generar el efecto.


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%24(function()%20%7B%0A%2F%2F%20fade%20en%20las%20im%C3%A1genes%20a%20escala%20de%20grises%20para%20que%20no%20haga%20un%20salto%20brusco%0A%24('.greyScale').hide().fadeIn(1000)%3B%0A%7D)%3B%0A%2F%2F%20window.load%20para%20asegurarnos%20de%20que%20las%20im%C3%A1genes%20est%C3%A1n%20cargadas%0A%24(window).load(function%20()%20%7B%0A%24('.greyScale').greyScale(%7B%0A%2F%2F%20llamada%20al%20plugin%20por%20el%20fadeTime%20que%20no%20viene%20por%20defecto%20(default%3A%20400ms)%0AfadeTime%3A%20500%2C%0Areverse%3A%20false%0A%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Recuerda siempre llamar a los archivos de JavaScript por el orden correcto. Primero jQuery, después la librería de escala de grises y por último nuestra función. Si nos fijamos en los métodos, lo haremos siempre con un desvanecimiento para que la imagen no nos haga un salto y de esta forma quede más suave.

También usaremos función de que cuando estén todos los elementos de la página cargados haga el efecto de escala de grises. Asimismo podemos modificar el tiempo que tendrá de efecto la animación que por defecto ese de 400 milisegundos.

Ya para terminar este tutorial de greyscale nos faltará que no añadamos la clase .greyScale a todas aquellas imágenes donde queramos que nos haga el efecto.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery GreyScale Plugin</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.4.2%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2FgreyScale.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Asection%7B%0Abackground%3A%20url('images%2Fbg-header-footer.png')%20repeat%20scroll%200%200%20black%3B%0A%7D%0A%0Aa%20%7B%0Adisplay%3A%20block%3B%0Atext-align%3A%20center%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

<body>
<section>
<a href="http://www.imaginagroup.com/">
<img src="http://www.imaginagroup.com/wp-content/themes/starkers/images/imaginagroup-logo.png" alt="Image" class="greyScale" />
</a>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%24(function()%20%7B%0A%2F%2F%20fade%20en%20las%20im%C3%A1genes%20a%20escala%20de%20grises%20para%20que%20no%20haga%20un%20salto%20brusco%0A%24('.greyScale').hide().fadeIn(1000)%3B%0A%7D)%3B%0A%2F%2F%20window.load%20para%20asegurarnos%20de%20que%20las%20im%C3%A1genes%20est%C3%A1n%20cargadas%0A%24(window).load(function%20()%20%7B%0A%24('.greyScale').greyScale(%7B%0A%2F%2F%20llamada%20al%20plugin%20por%20el%20fadeTime%20que%20no%20viene%20por%20defecto%20(default%3A%20400ms)%0AfadeTime%3A%20500%2C%0Areverse%3A%20false%0A%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</section>

</body>
</html>

En Imagina Formación te ofrecemos formación en estas nuevas tecnologías. Si quieres estar a la última en cualquiera de las diferentes plataformas, y a fin de cuentas, tu objetivo es aprender no dudes en solicitar información sin compromiso. Contamos con las herramientas y los medios necesarios para impartir cualquier tipo de formación. Te lo ponemos fácil. Formación online, presencial o de empresa, elige la modalidad que mejor se adapte a tus necesidades.

¿Sabes cómo puedes realizar una formación sin coste para tu empresa?

¿Buscas cursos bonificados? ¿Conoces qué es la Fundación Tripartita? Si eres trabajador tus cursos están subvencionados. Imagina Formación es una entidad organizadora de la Fundación Estatal de modo que puedes gestionar la formación bonificada de los cursos con nosotros. Nos encargamos de todos los trámites para conseguir la bonificación sin ningún coste adicional. Cumplimos con todos los requisitos para que nuestros cursos sean 100% bonificables.

Échale un vistazo a nuestro catálogo de Cursos Destacados y amplia tus conocimientos en las últimas tecnologías de referencia del sector. Si tienes cualquier duda… ¡Contacta con nosotros!

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies