Tratamiento de Imágenes en Canvas HTML5

Tratamiento de Imágenes en Canvas HTML5

Seguimos con la serie de ejemplos de Imágenes en Canvas HTML5 con un conjunto de funciones fáciles de aprender y utilizar en vuestros códigos dedicadas al tratamiento de las mismas. Los siguientes métodos nos mostrarán como posicionar imágenes, redimensionarlas y cortarlas.

Si acabas de entrar y es el primer contacto con HTML5 que tienes te recomendamos que realices este tutorial básico antes de nada. Si en cambio no viste nuestro anterior tutorial sobre Canvas HTML5 puedes ir desde aquí directamente.

IR A TUTORIAL CANVAS IR A TUTORIAL HTML5

Dibujar Imágenes en Canvas HTML5

El siguiente método servirá para dibujar una imagen en canvas HTML5. Uno de los problemas que tendremos es la posición de nuestro código javascript. Si este está cargado en la cabecera no tendremos ningún problema al cargar la imagen. En cambio si este está situado en un lugar intermedio del código no podrá visualizarse la imagen en el canvas si esta no está dibujada previamente en nuestra web.

Método y Descripción
1 drawImage(imagen,x,y)
Este método crea una imagen y la posiciona en las coordenadas dadas.

En estos métodos x e y especifican la posición en el canvas (posición relativa a su origen) desde la esquina superior izquierda de la imagen.

Ejemplo:

El siguiente ejemplo es una demostración simple del uso de los métodos anteriormente mencionados para crear y posicionar imágenes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #myCanvas {
            width: 620px;
            height:282px;
         }
      </style>
      <script type="text/javascript">
         function posicionaImagen(){
            // Toma el elemento canvas usando el DOM
            var canvas = document.getElementById('myCanvas');

            // Asegurate de no ejecutar el canvas en navegadores que no lo soporten
            if (canvas.getContext){

               // usa getContext para empezar a dibujar en el canvas
               var ctx = canvas.getContext('2d');

               // crea un objeto imagen, posicionalo en el canvas y selecciona la fuente de la imagen
               var image = new Image();
               image.onload = function(){
                  ctx.drawImage(image,0,0);
               };
               image.src = 'http://www.wegocio.com/wp-content/uploads/2017/02/darth-vader.jpg';
            } else {
               alert('Necesitas un navegador actualizado para ver esta demo.');
            }
         }
      </script>
   </head>
   <body onload="posicionaImagen();">
      <canvas id="myCanvas"></canvas>
   </body>
</html>

Utilizaremos la siguiente imagen para dibujarla:

Imágenes en Canvas HTML5

El código realizado a través de javascript la mostrará de la siguiente manera:


Redimensión de Imágenes en Canvas HTML5

Para la redimensión de imágenes en Canvas HTML5 utilizaremos el mismo método que anteriormente pero esta vez con algunos parámetros más que definiran el ancho y el alto resultante de la imagen

Método y Descripción
1 drawImage(imagen,x,y,ancho,alto)
Este método crea una imagen, la posiciona en las coordenadas dadas y redimensiona la imagen con el tamaño dado.

En estos métodos x e y especifican la posición en el canvas (posición relativa a su origen) desde la esquina superior izquierda del rectángulo.

Ejemplo:

El siguiente ejemplo es una demostración sencilla de los métodos descritos anteriormente para redimensionar una imagen en Canvas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #myCanvas {
            width: 300px;
            height:150px;
         }
      </style>
      <script type="text/javascript">
         function redimensionaImagen(){
            // Toma el elemento canvas usando el DOM
            var canvas = document.getElementById('myCanvas');

            // Asegurate de no ejecutar el canvas en navegadores que no lo soporten
            if (canvas.getContext){

               // usa getContext para empezar a dibujar en el canvas
               var ctx = canvas.getContext('2d');

               // crea un objeto imagen, posicionalo en el canvas y selecciona la fuente de la imagen
               var image = new Image();
               image.onload = function(){
                  ctx.drawImage(image,0,0,300,150);
               };
               image.src = 'http://www.wegocio.com/wp-content/uploads/2017/02/darth-vader.jpg';
            } else {
               alert('Necesitas un navegador actualizado para ver esta demo.');
            }
         }
      </script>
   </head>
   <body onload="redimensionaImagen();">
      <canvas id="myCanvas"></canvas>
   </body>
</html>

Utilizaremos la siguiente imagen para dibujarla:

Imágenes en Canvas HTML5

El código realizado a través de javascript la mostrará de la siguiente manera:


Recortar Imágenes en Canvas HTML5

De nuevo para recortar una imagen y posicionarla en nuestro Canvas, utilizaremos el mismo método pero con nuevos parametros que definiran la posición y dimensiones en origen y destino respectivamente.

Método y Descripción
1 drawImage(imagen,x,y,ancho,alto,destX,destY,destAncho,destAlto)
Este método crea una imagen, la posiciona en las coordenadas dadas y redimensiona la imagen con el tamaño dado. Además de recortar la imagen desde unas coordenadas y dimensiones dadas

Ejemplo

En este último ejemplo realizaremos con los métodos señalados en la tabla anterior un recorte en la imagen de Darth Vader y la mostraremos en nuestro Canvas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #myCanvas {
            width: 150px;
            height:50px;
         }
      </style>
      <script type="text/javascript">
         function recortaImagen(){
            // Toma el elemento canvas usando el DOM
            var canvas = document.getElementById('myCanvas');

            // Asegurate de no ejecutar el canvas en navegadores que no lo soporten
            if (canvas.getContext){

               // usa getContext para empezar a dibujar en el canvas
               var ctx = canvas.getContext('2d');

               // crea un objeto imagen, posicionalo en el canvas y selecciona la fuente de la imagen
               var image = new Image();
               image.onload = function(){
                  ctx.drawImage(image,0,0,300,150,150,0,150,50);
               };
               image.src = 'http://www.wegocio.com/wp-content/uploads/2017/02/darth-vader.jpg';
            } else {
               alert('Necesitas un navegador actualizado para ver esta demo.');
            }
         }
      </script>
   </head>
   <body onload="recortaImagen();">
      <canvas id="myCanvas"></canvas>
   </body>
</html>

Utilizaremos la siguiente imagen para dibujarla:

Imágenes en Canvas HTML5

La última parte de nuestro código javascript mostrará la siguiente imagen:

Gracias por seguir esta segunda entrega de nuestro tutorial o guía de trucos y consejos en Canvas HTML5. Esperamos realizar más entregas en el futuro para vuestro disfrute. No olviden dejar sus comentarios y dudas sobre el tema y no dejen de seguirnos.

Related Posts

1 COMMENTS

Leave a reply