Otro ejemplo de dibujo en con el API de canvas del HTML 5, en el que incluimos imágenes traídas por diferentes vías posibles con Javascript.
En el artículo anterior explicamos las generalidades del trabajo con imagenes en el elemento canvas del HTML 5. Continuando con esas explicaciones veremos ahora cómo pintar en un lienzo diversas imágenes que extraemos de varios modos.
La idea es experimentar con el dibujo en Canvas por medio de una nueva práctica y a la vez repasar todos los modos que existen de obtener una imagen por medio de Javascript, que ya explicamos en el artículo Distintas maneras de acceder a objetos Image Javascript.
Como ya se explicó en el mencionado artículo, existen diversas maneras de conseguir objetos Image en Javascript, que luego podríamos pintar en un canvas. Lo iremos viendo directamente sobre el código fuente de este ejemplo:
1.- Traerse una imagen que hay en la página: por medio del método getElementById(), enviando como parámetro el identificador de la etiqueta IMG de la imagen deseada.
//Creo un objeto Image con una imagen de la pagina
var img = document.getElementById("im1");
//luego la dibujo en el canvas
ctx.drawImage(img, 10, 10);2.- A través del Array de images: También de una imagen que haya en la página, en una etiqueta IMG. Al array accedemos con el índice de la imagen según orden de aparición en el código HTML.
//consigo una imagen desde el array de imágenes
ctx.drawImage(document.images[1], 122, 20);3.- Creando nuestro objeto Image: Que es la forma con la que trabajamos en el artículo anterior. Y por tanto no vamos a repetir las explicaciones.
//un objeto Image
var imagen = new Image();
imagen.src = "http://www.desarrolloweb.com/images/iconos/user_go.png";
imagen.onload = function(){
ctx.drawImage(imagen, 330, 195);
}4.- Especificar la imagen en formato data:url: que es una cadena de caracteres en formato Base64 que permite especificar elementos como imágenes a partir de código, pero como si esos elementos los adquiriésemos remotamente.
//a través de un "data: url"
var img = new Image();
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
ctx.drawImage(img, 300, 200);5.- Acceder a el diseño dibujado en otro canvas: para mostrar en un canvas el contenido de otro, como si fuera una imagen.
//consigo una imagen desde un canvas
var imgCanvas = document.getElementById("canvas2");
ctx.drawImage(imgCanvas, 100, 120);Este quinto y último método permite algunas aplicaciones interesantes, como mostrar un un canvas una miniatura de lo que hay en otro canvas.
Ejemplo completo de trabajo en canvas con imágenes de varias fuentes
Para acabar, podemos ver el código completo de una página que utiliza todos esos métodos para acceder a imágenes y mostrarlas en el canvas.
Se podrá ver que en realidad se crean dos canvas. Uno sólo lo creamos para poder copiarlo en otro canvas.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<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(){
//cargo un camino en un canvas, para luego traerlo como imagen
var ctx = cargaContextoCanvas('canvas2');
if(ctx){
ctx.fillStyle = '#990000';
ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(112,15);
ctx.lineTo(143,69);
ctx.lineTo(112,123);
ctx.lineTo(50,123);
ctx.lineTo(19,69);
ctx.closePath();
ctx.fill();
}
//Recibimos el elemento canvas
var ctx = cargaContextoCanvas('micanvas');
if(ctx){
//Creo un objeto Image con una imagen de la pagina
var img = document.getElementById("im1");
ctx.drawImage(img, 10, 10);
//consigo una imagen desde el array de imágenes
ctx.drawImage(document.images[1], 122, 20);
//consigo una imagen desde un canvas
var imgCanvas = document.getElementById("canvas2");
ctx.drawImage(imgCanvas, 100, 120);
//un objeto Image
var imagen = new Image();
imagen.src = "http://www.desarrolloweb.com/images/iconos/user_go.png";
imagen.onload = function(){
ctx.drawImage(imagen, 330, 195);
}
//a través de un "data: url"
var img = new Image();
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
ctx.drawImage(img, 300, 200);
}
document.images[1].src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
}
</script>
</head>
<body>
<h2>Canvas que estoy creando con una serie de imágenes</h2>
<canvas id="micanvas" width="500" height="400">
Tu navegador no soporta canvas.
</canvas>
<p>
<div style="display: none;">
<h2>Cosas que pongo aquí para acceder desde Javascript</h2>
<img src="canvas-html5.png" id="im1">
<img src="logo-grande.jpg">
<p>
<canvas id="canvas2" width="150" height="150">
Recicla tu navegador!!
</canvas>
</div>
</body>
</html>Este ejemplo se puede ver en una página aparte.
En futuros artículos mostraremos cómo podemos alterar la forma de las imágenes dinámicamente, para mostrarlas en el canvas con algunos cambios.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...