Dibujar el contenido de imágenes en los elementos canvas del HTML 5, usando cualquier tipo de archivo gráfico permitido (gif, jpg, png) para incluir una imagen en el lienzo de un canvas.
Una de las cosas más interesantes que podremos hacer cuando dibujamos en el lienzo del elemento canvas es importar y mostrar directamente el contenido de archivos gráficos externos, es decir, usar imágenes GIF, JPG o PNG dentro de los dibujos que realizamos con canvas. En este artículo veremos cómo realizar este punto, aunque adelantamos que es bastante fácil.
Las imágenes provenientes de archivos gráficos las podemos crear con nuestro editor preferido y hacer fácilmente gráficos bastante creativos y vistosos, o editar a partir de fotos creadas con nuestra cámara. Luego las podemos incluir en el Canvas y así conseguir que nuestros trabajos tengan una mejor calidad que si dibujamos a mano con las funciones Javascript del API de Canvas.
Con un poco de creatividad y algo de código Javascript, podremos hacer composiciones basadas en varias imágenes "pegadas" en el lienzo, o utilizar imágenes de fondo sobre las que luego pintamos con Javascript para destacar cosas. Como podemos usar cualquier tipo de archivo gráfico, mientras que esté soportado por el navegador, las posibilidades son enormes.
Método drawImage() para pintar una imagen en el canvas
Para dibujar una imagen en el lienzo se utiliza el Método drawImage(), que pertenece al objeto contexto del canvas, con la siguiente sintaxis:
drawImage(objeto_imagen, x, y)Enviamos tres parámetros, el primero es el objeto Javascript de la imagen que se desea incluir en el lienzo. Los dos siguientes son las coordenadas donde situar la imagen, siendo (x,y) el punto donde se colocará la esquina superior izquierda de la imagen.
Como decía, este método pertenece al objeto del canvas, por lo que antes de poder invocarlo debemos haber obtenido el contexto del canvas, tal como hemos aprendido anteriormente en el Manual de Canvas para cualquier otro tipo de dibujo.
Objeto Javascript imagen
El objeto imagen es uno de los objetos básicos de Javascript, que afortunadamente funciona igual en todos los navegadores. En realidad ya lo hemos explicado en anteriores artículos dentro de DesarrolloWeb.com. Concretamente os recomendamos el Manual de Tratamiento de imágenes en Javascript.
Este objeto de imagen lo podemos obtener de varias maneras, pero de momento vamos a aprender a generarlo dinámicamente con una instrucción Javascript.
var img = new Image();Con esto tenemos una variable llamada "img" que tiene un objeto imagen dentro. Ese objeto imagen en estos momentos está sin ningún atributo. Podríamos decir que está sin inicializar. La tarea de inicialización fundamental sería asignarle una ruta a un archivo gráfico.
img.src = 'logo-grande.jpg';Esto hace que en el objeto Image se cargue la imagen que está en el archivo 'logo-grande.jpg' y como no hemos especificado ningún directorio en la ruta, se supone que ese archivo está en la misma carpeta que el archivo HTML donde esté ese código Javascript.
Una vez tenemos el objeto imagen, podríamos pintarlo en un canvas por medio de la función drawImage(). Sería algo parecido a esto:
ctx.drawImage(img, 10, 10);Pero atención, porque este código tiene un detalle: la imagen no se dibujará en el canvas a no ser que esté previamente cargada en el navegador.
En la secuencia de instrucciones, tal como lo tenemos ahora:
var img = new Image();
img.src = 'logo-grande.jpg';
ctx.drawImage(img, 10, 10);El navegador al especificar el archivo de la imagen, actualizando el atributo src, tiene que descargarlo y eso lleva un tiempo. Por tanto, si inmediatamente a indicar el archivo, intentamos dibujar la imagen, dará un problema. Dicho de otra manera, sólo podemos dibujar la imagen cuando estamos seguros que el navegador ya la ha descargado. Para asegurarnos de este punto, podemos usar el evento onload de la imagen, para llamar a drawImage() sólo cuando la imagen ha terminado de cargarse.
var img = new Image();
img.src = 'canvas-html5.png';
img.onload = function(){
ctx.drawImage(img, 10, 10);
}Ejemplo de dibujo de imagen en un canvas
Veremos a continuación el código completo de un ejemplo que carga una imagen en un elemento canvas.
<html>
<head>
<title>Imágenes en Canvas</title>
<script language="javascript">
function cargaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
window.onload = function(){
//Recibimos el elemento canvas
var ctx = cargaContextoCanvas('micanvas');
if(ctx){
//Creo una imagen conun objeto Image de Javascript
var img = new Image();
//indico la URL de la imagen
img.src = 'logo-desarrolloweb.gif';
//defino el evento onload del objeto imagen
img.onload = function(){
//incluyo la imagen en el canvas
ctx.drawImage(img, 10, 10);
}
}
}
</script>
</head>
<body>
<canvas id="micanvas" width="200" height="100">
Tu navegador no soporta canvas.
</canvas>
</body>
</html>Podemos ver el ejemplo en marcha en una página aparte.
En el siguiente artículo vamos a mostrar diversas maneras de acceder a objetos Image desde Javascript para mostrar esas imágenes en el canvas.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...