Una presentación de HTML5 con lienzo y jQuery

Probablemente haya escuchado mucho sobre el nuevo elemento canvas de HTML5. Como su nombre indica, se trata de un elemento especial que nos permite crear y modificar gráficos. Además, podemos también utilizar como cualquier otro elemento en la página: aplicar animaciones jQuery, escuchas de eventos y integrar profundamente en nuestros diseños.

Actualización: Por demanda popular, ahora puede descargar una versión de avance automático de esta presentación. Leer más en este breve tutorial.

La Idea de

Con JavaScript, vamos a aplicar un filtro especial para cada imagen en la presentación de diapositivas. Crear una nueva versión de las imágenes con mayor contraste y colores más intensos y almacenarla en un elementos de lienzo.

Cómo funciona la presentación de diapositivas

Cuando el usuario elige pasar a otra diapositiva, se muestra el lienzo con una animación de fadeIn , creando un efecto de iluminación suave.

El código HTML

El primer paso en la creación de la presentación de diapositivas, se establecen en el código HTML de la página.

HTML5-slideshow.html

 
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>An HTML5 Slideshow  w/ Canvas & jQuery | Tutorialzine Demotitle>  
 
<link rel="stylesheet" type="text/css" href="styles.css" /> 
 
head>  
 
<body>  
 
<div id="slideshow"> 
 
   <ul class="slides">  
       <li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam" />li> 
       <li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach" />li> 
       <li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" />li> 
       <li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" />li> 
   ul> 
 
   <span class="arrow previous">span> 
   <span class="arrow next">span> 
div>  
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script> 
<script src="script.js">script> 
body>  
html>

En primer lugar tenemos el doctype de HTML5, seguido de la sección head del documento. Después de la etiqueta de título y la hoja de estilos que pasemos con el cuerpo.

Puede ver que el formato para la presentación de diapositivas es realmente sencillo. El div contenedor principal, #slideshow, tiene un desordenadas lista y las flechas anteriores y siguientes. La lista desordenada contiene las diapositivas, con cada uno definido como un elemento LI . Como se muestra en la ilustración anterior, esto es donde se insertan los elementos de lienzo con las versiones modificadas de las imágenes.

Por último incluimos jQuery y nuestros script.js, a la que vamos a retomar en el último paso de este tutorial.

La CSS

Todos los estilos para la presentación de diapositivas residen en styles.css. He usado el #slideshow id del elemento de contención principal como un espacio de nombres, por lo que fácilmente puede anexar estos estilos a la hoja de estilos sin tener que preocuparse acerca de los conflictos.

Styles.CSS

 
#slideshow{  
   background-color:#F5F5F5;  
   border:1px solid #FFFFFF;  
   height:340px;  
   margin:150px auto 0;  
   position:relative;  
   width:640px;  
 
   -moz-box-shadow:0 0 22px #111;  
   -webkit-box-shadow:0  0 22px #111;  
   box-shadow:0 0 22px #111;  
}  
 
#slideshow ul{  
   height:320px;  
   left:10px;  
   list-style:none outside none;  
   overflow:hidden;  
   position:absolute;  
   top:10px;  
   width:620px;  
}  
 
#slideshow li{  
   position:absolute;  
   display:none;  
   z-index:10;  
}  
 
#slideshow li:first-child{  
   display:block;  
   z-index:1000;  
}  
 
#slideshow .slideActive{  
   z-index:1000;  
}  
 
#slideshow canvas{  
   display:none;  
   position:absolute;  
   z-index:100;  
}  
 
#slideshow .arrow{  
   height:86px;  
   width:60px;  
   position:absolute;  
   background:url('img/arrows.png') no-repeat;  
   top:50%;  
   margin-top:-43px;  
   cursor:pointer;  
   z-index:5000;  
}  
 
#slideshow .previous{ background-position:left top;left:0;}  
#slideshow .previous:hover{  background-position:left bottom;}  
 
#slideshow .next{ background-position:right top;right:0;}  
#slideshow .next:hover{ background-position:right bottom;}

Nos podemos dividir a nuestros visitantes, que interactuarán con la presentación de diapositivas, en tres grupos principales:

Personas con JavaScript desactivado. Estos usuarios sólo podrán ver la primera diapositiva y serán incapaces de cambiar a otra;
Personas con JavaScript cambiaron, pero sin soporte de lienzo. Para los visitantes de este grupo, las diapositivas cambiará instantáneamente, sin transición de efectos;
Personas con JavaScript habilitado y soporte de lienzo. Estas son personas que utilizan las últimas versiones de Firefox, Safari, Chrome, Opera y el pronto a ser lanzado agilizarán. Disfrutarán de la presentación de diapositivas en su esplendor;

Para tener en cuenta los dos primeros grupos, un número de reglas se aplica a la hoja de estilos. Con la ayuda del selector de primera infancia , sólo la primera diapositiva se muestra por defecto. También un número de desbordamiento: ocultos reglas se aplican en un número de plazas por si acaso.

Un Slideshow con lienzo de HTML5 y jQuery

El código JavaScript

Pasemos a la última parte del tutorial: el código JavaScript y jQuery. Como ya hemos explicado los principios básicos detrás del efecto, permite pasar directamente a la ejecución.

script.js: parte 1

 
$(window).load(function(){  
 
   // We are listening to the window.load event, so we can  be sure 
   // that the images in the slideshow are loaded  properly. 
 
   // Testing wether the current browser supports the  canvas element: 
   var supportCanvas =  'getContext' in document.createElement('canvas');  
 
   // The canvas manipulations of the images are CPU  intensive, 
   // this is why we are using setTimeout to make them  asynchronous 
   // and improve the responsiveness of the page.  
 
   var slides =  $('#slideshow li'), 
       current = 0, 
       slideshow = {width:0,height:0};  
 
   setTimeout(function(){  
 
       if(supportCanvas){  
           $('#slideshow  img').each(function(){  
 
               if(!slideshow.width){  
                   // Saving the dimensions of the first image:  
                   slideshow.width = this.width;  
                   slideshow.height = this.height;  
               } 
 
               // Rendering the modified versions of the images:  
               createCanvasOverlay(this);  
           }); 
       } 
 
       $('#slideshow  .arrow').click(function(){  
           var li            =  slides.eq(current), 
               canvas        = li.find('canvas'),  
               nextIndex    = 0; 
 
           // Depending on whether this is the next or previous  
           // arrow, calculate the index of the next slide  accordingly. 
 
           if($(this).hasClass('next')){  
               nextIndex = current >= slides.length-1 ? 0 : current+1;  
           } 
           else {  
               nextIndex = current <= 0 ? slides.length-1 : current-1;  
           } 
 
           var next =  slides.eq(nextIndex); 
 
           if(supportCanvas){  
 
               // This browser supports canvas, fade it into view:  
 
               canvas.fadeIn(function(){  
 
                   // Show the next slide below the current one:  
                   next.show(); 
                   current = nextIndex;  
 
                   // Fade the current slide out of view:  
                   li.fadeOut(function(){  
                       li.removeClass('slideActive');  
                       canvas.hide(); 
                       next.addClass('slideActive');  
                   }); 
               }); 
           } 
           else {  
 
               // This browser does not support canvas.  
               // Use the plain version of the slideshow.  
 
               current=nextIndex; 
               next.addClass('slideActive').show();  
               li.removeClass('slideActive').hide();  
           } 
       }); 
 
   },100);

Con document.createElement(), usted puede crear cualquier elemento DOM que te guste. Así que para probar si el explorador admite realmente lienzo (y no sólo crea un elemento genérico), utilizamos el operador in para comprobar si el método getContext() , que es parte integrante de la norma. El resultado de esta comprobación se utiliza en todo el código para tener en cuenta para los usuarios con navegadores que no admiten aún lienzo.

Observe que las llamadas a la función createCanvasOverlay (que analizaremos en la segunda parte del código) son encerradas en una declaración de setTimeout. Esto se hace porque la función es procesador intensivo y podría causar la ventana del navegador a estancar. setTimeout rompe fuera de la ruta de ejecución principal y ejecuta el código de forma asíncrona, maximizar la capacidad de respuesta de la página.

script.js – parte 2

 
   // This function takes an image and renders  
   // a version of it similar to the Overlay blending  
   // mode in Photoshop.  
 
   function createCanvasOverlay(image){  
 
       var canvas             = document.createElement('canvas'),  
           canvasContext    = canvas.getContext("2d");  
 
       // Make it the same size as the image  
       canvas.width = slideshow.width;  
       canvas.height = slideshow.height;  
 
       // Drawing the default version of the image on the  canvas: 
       canvasContext.drawImage(image,0,0);  
 
       // Taking the image data and storing it in the  imageData array: 
       var imageData    =  canvasContext.getImageData(0,0,canvas.width,canvas.height),  
           data        = imageData.data;  
 
       // Loop through all the pixels in the imageData array,  and modify 
       // the red, green, and blue color values.  
 
       for(var i =  0,z=data.length;i
 
           // The values for red, green and blue are consecutive  elements 
           // in the imageData array. We modify the three of them  at once: 
 
           data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255)  : 
                       (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));  
           data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] /  255) : 
                       (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));  
           data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] /  255) : 
                       (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));  
 
           // After the RGB channels comes the alpha value, which  we leave the same. 
           ++i; 
       } 
 
       // Putting the modified imageData back on the canvas.  
       canvasContext.putImageData(imageData,0,0,0,0,imageData.width,imageData.height);  
 
       // Inserting the canvas in the DOM, before the image:  
       image.parentNode.insertBefore(canvas,image);  
   }  
 
});

Es donde ocurre la magia. El elemento canvas es básicamente un buen pedazo de papel en el que puede dibujar con JavaScript. El código anterior crea un elemento de lienzo en blanco e importa la imagen, que se pasa como parámetro, el método drawImage() . Después de esto, utilizamos el método getImageData() para exportar el contenido de todos los píxeles del lienzo en la matriz de imageData .

Lo que es más, para cada píxel de la imagen que tenemos cuatro entradas de la matriz: uno de los colores rojos, verdes y azules y el canal alfa (transparencia). Estos son todos los números de 0 a 255. El bucle principal de tiene que pasar por todos los píxeles y aplicar una ecuación de filtro especial que aclara los colores más claros y oscurece los oscuros. Es el mismo efecto que se obtiene mediante el uso de la superposición de fusión modo en photoshop.

El bucle principal de tiene que hacer una cantidad increíble de trabajo – para una imagen de 600 × 400 píxeles hace 240 000 iteraciones! Esto significa que el código debe ser tan óptimo como sea posible. Esto es por qué, en el bucle, lo de copiar la fórmula tres veces en lugar de llamar a una función. Quitando las llamadas de función, el bucle se convirtió en casi tres veces más rápido.

Tenga en cuenta que el tiempo de procesamiento aumentará proporcionalmente, si decide incluir diapositivas más o utilizar imágenes más grandes.

Con esto nuestro HTML5 Canvas Slideshow es completa!

Palabras finales

El elemento canvas abre una nueva manera de construir aplicaciones de internet enriquecidas. Para aquellos de ustedes que son curiosos, en un PC relativamente nuevo, tarda Firefox 1.2 segundos para generar imágenes de lienzo cuatro, mientras que Chrome es más rápido en 0.67s. Teniendo en cuenta la cantidad de trabajo que se realiza, esto es un logro realmente impresionante.

crear galeria html5