El canvas de HTML 5 (VIII). Insertando imágenes.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

Insertar imágenes en un canvas es una de las posibilidades que tiene este elemento. Sin embargo, a menos que sea necesario emplearlo, yo sugiero usar un contenedor más “natural”, como un figure o, incluso, un simple div. La razón no es caprichosa. Si bien el uso del canvas como contenedor de una imagen nos permite ciertas posibilidades adicionales, estas no son siempre necesarias, y el precio es una mayor complejidad en la programación de nuestra web, como veremos en este artículo.

INSERTANDO UNA IMAGEN EN UN CANVAS

El primer problema que nos encontramos cuando queremos insertar una imagen en un canvas es que dicha imagen debe existir en el documento web (fuera del canvas). Es decir. En un canvas no se puede cargar una imagen a partir de un fichero, sino que debe ser parte de la página. Esto es un problema si el diseño de tu página implica que la imagen esté en el canvas, pero que no aparezca en ninguna otra parte. La solución pasa por incluirla en cualquier parte de la página y atribuirle, mediante CSS, la propiedad display con el valor none, con lo que no se visualizará, ni molestará para nada. Sin embargo, no deja de ser un engorro tener que recurrir a esto, pero no nos queda más remedio. Así pues, supongamos que, en alguna parte de nuestro documento web, tenemos lo siguiente:

<img src="imagenes/universo.jpg" id="universo" style="display:none;">

Por lo demás, una vez creado el contexto que vamos a asociar al canvas (al igual que hemos venido haciendo hasta ahora), lo que hacemos es referenciar la imagen en una variable de JavaScript (o de jQuery, si es el caso).

var imagen_1 = document.getElementById("universo"); // Con JavaScript

o bien:

var imagen_1 = $("#universo")[0]; // Con jQuery

A continuación, aplicamos el método drawImage(), que pertenece al objeto contexto del canvas, con lo que la imagen se muestra dentro de dicho canvas. De este método hablamos a continuación:

EL MÉTODO drawImage()

Este método puede recibir hasta nueve parámetros, de los que sólo tres son obligatorios, siendo los otros seis opcionales. El primer parámetro es la variable que hemos creado con javascript o jQuery referenciando la imagen. Las demás variables son valores numéricos que expresan dimensiones y ubicación de la imagen con respecto al canvas, en píxeles.

Cuando queremos introducir una imagen en un canvas, podemos insertar la imagen completa, o sólo un recorte de esta. Además, en ambos casos, podemos decidir el tamaño final con el que se visualizará, que, no necesariamente, debe coincidir con el de la imagen original.

Los parámetros son los siguientes:

PARÁMETRO SE REFIERE A OPCIONAL
img La referencia en JavaScript o jQuery del elemento imagen que queremos insertar en el canvas. NO
rec_x La coordenada X de la imagen original donde empieza la parte de la misma que nos interesa para incluir en el canvas. Si vamos a incluirla entera, este valor puede ser 0 o puede omitirse.
rec_y La coordenada Y de la imagen original donde empieza la parte de la misma que nos interesa para incluir en el canvas. Si vamos a incluirla entera, este valor puede ser 0 o puede omitirse.
rec_ancho La anchura de la parte de la imagen en la que estamos interesados para recortar. Si vamos a incluir la imagen entera, este valor coincidirá con la anchura real de la misma, o bien puede omitirse.
rec_alto La altura de la parte de la imagen en la que estamos interesados para recortar. Si vamos a incluir la imagen entera, este valor coincidirá con la altura real de la misma, o bien puede omitirse.
origen_x La coordenada X del canvas donde situaremos la esquina superior izquierda de la imagen, o del recorte elegido. Este parámetro es obligatorio. NO
origen_y La coordenada Y del canvas donde situaremos la esquina superior izquierda de la imagen, o del recorte elegido. Este parámetro es obligatorio. NO
ancho La anchura con la que queremos que aparezca la imagen o el recorte elegido en el canvas. Ten en cuenta que si la anchura especificada difiere mucho de la real (en más o en menos), la imagen podría pixelar. Además, ten en cuenta que si excedes los límites del canvas, se perderá parte de la imagen. Si se omite, este parámetro tomará el valor de la anchura real de la imagen o el recorte elegido.
alto La altura con la que queremos que aparezca la imagen o el recorte elegido en el canvas. Ten en cuenta que si la altura especificada difiere mucho de la real (en más o en menos), la imagen podría pixelar. Además, ten en cuenta que si excedes los límites del canvas, se perderá parte de la imagen. Si se omite, este parámetro tomará el valor de la altura real de la imagen o el recorte elegido.

Como siempre se ve todo más claro con ejemplos, te he dejado un código completo para que veas como funciona y pruebes a cambiar valores de los distintos parámetros. Te lo puedes descargar en este enlace.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *