Colocación de imágenes en canvas para HTML 5

Aunque en canvas existen diversas maneras para dibujar elementos vectoriales, que no se deforman, también es posible la manipulación de mapa de bits. En esta ocasión veremos la opción para agregar una imagen. O más bien, dibujarla.

Algunas de las ventajas de hacer esto son:

  • Es una manera fácil de “engañar” a los visitantes que quieran llevarse nuestras imágenes. Si le dan click derecho al canvas, no saldrá la opción de “Guardar imagen como…”. Obviamente esta es una opción muy básica y cualquier persona que sepa un poco de html podrá encontrar la imagen original. Pero vaya, al menos nos deshacemos de los novatos. Y a los otros hacemos que les tome un poco de esfuerzo.
  • Se puede añadir más de una imagen, con las que se pueden hacer composiciones, collages, que si las juntamos con los elementos que hemos visto como figuras geométricas, líneas, o incluso textos, nos da una gran oportunidad para ser creativos.
  • Se pueden añadir pedazos de la imagen, y también se puede modificar la imagen por canales.
  • Una vez terminada nuestra composición, se puede guardar como una imagen. Pero esos se verá más adelante.




drawImage()

El método para colocar la imagen dentro del canvas se llama drawImage(). Lo más importante que se tiene que saber de ella es que se puede usar de tres maneras. Pero antes de eso, veamos lo indispensable. Además del canvas debe de haber una imagen, un elemento <img>. Este puede estar dentro del html o también puede ser creada por javascript. Por simplicidad del ejercicio, lo haremos desde la primera opción.

Dentro de los archivos del ejercicio tenemos el ya tradicional documento inicio.html, el cual solamente tiene una imagen y nuestro elemento canvas. Vistos en un navegador de escritorio veremos que se colocan en el mismo renglón.

canvasimagen01

En una pantalla más pequeña, como pudiera ser desde un teléfono, el canvas se pondría abajo, lo cual nos hace recordar algo que no habíamos mencionado: su propiedad de display en css es inline, al igual que la etiqueta <img> o <a>.

La forma más simple de utilizar drawImage es utilizando trés parámetros. El primero es el identificador de la etiqueta de imagen, la cual no tiene hasta el momento, por lo que debemos ponerla.

<img id="laFoto" src="foto.jpg" width="500" height="500">

Los siguientes dos parámetros son la posición en X y en Y dentro del canvas. Para mostrar un poco del lienzo, colocaremos la imagen unos cuantos pixeles separada del borde superior izquierdo.

function dibujar(){
 var contexto = document.getElementById("elCanvas").getContext("2d");
 contexto.drawImage(laFoto, 10 ,10);
}

El resultado es:

canvasimagen02

Una segunda opción es usando cinco parámetros en lugar de tres. Los parámetros 4 y 5 son para definir el tamaño de la imagen dentro del canvas, con lo cual la podemos escalar. Aquí la pondremos de 300 x 300.

contexto.drawImage(laFoto, 10 ,10, 300, 300);

canvasimagen03

La tercera opción lleva 9 parámetros. En este caso cambian el orden con respecto de las anteriores, ya que su finalidad es seleccionar solamente una región de la imagen. Por ello, los parámetros 2 al 5 son para definir las ya clásicas opciones para seleccionar una área rectangular (x, y, w, h). Del mismo modo, las opciones 6 a 9 son para establecer el rectángulo dentro del canvas.

Con la siguiente opción tomaremos parte del teléfono, haciendo un rectángulo que comienza en la coordenada 200 x, 100 y, que mide 120 de ancho y alto. Lo pondremos en el canvas desde la posición 50 x, 50 y, escalándola al 150%, por lo que medirá 180 de ancho y alto.

contexto.drawImage(laFoto, 200 , 100, 120, 120, 50, 50, 180, 180);

canvasimagen04

Conociendo esta sola función, drawImage() podemos realizar cosas muy interesantes, las cuales haremos más adelante.




Código final

<!doctype html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Canvas Base</title>
<style>
#elCanvas{
 background-color:#FC3;
 border:1px solid black; 
}
</style>
<script>
function dibujar(){
 var contexto = document.getElementById("elCanvas").getContext("2d");
 //Primera opción, con 3 parámetros: imagen, x y y en el canvas
 //contexto.drawImage(laFoto, 10 ,10);
 //Segunda opción, con 5 parametros: imagen, x, y, ancho y alto en el canvas
 //contexto.drawImage(laFoto, 10 ,10, 300, 300);
 //Tercera opcion, con 9 parámetros: imagen, x, y, ancho y alto de la sección de la imagen, x, y, ancho y alto en donde se colocará en el canvas
 contexto.drawImage(laFoto, 200 , 100, 120, 120, 50, 50, 180, 180);
}
</script>
</head>
<body onLoad="dibujar()">
<img id="laFoto" src="foto.jpg" width="500" height="500">
<canvas id="elCanvas" width="500" height="500">
Tu navegador no entiende HTML 5
</canvas>
</body>
</html>

Descarga los archivos del ejercicio

 

Be the first to comment

Leave a Reply

Your email address will not be published.


*