Distintas maneras de acceder a objetos Image Javascript

Este es un Taller de Javascript que además se enmarca dentro del Manual del tratamiento de imágenes de Javascript. Vamos a aprender a obtener objetos Image de Javascript, que luego podemos utilizar para lo que deseemos.

Vamos a mostrar varias de las maneras que tenemos para realizar ese paso, algunas más generales y obvias y otras más específicas de entornos de trabajo determinados. Al final siempre obtenemos lo mismo, una variable que tiene dentro un objeto Image.

Crear una imagen desde código Javascript

La manera más directa es crear tu objeto imagen (objeto Image de Javascript) instanciando un objeto de la clase Image, de esta manera:

var objImagen = new Image();

Luego podríamos asignar valores a las distintas propiedades del objeto imagen, para configurarla. Por ejemplo:

img.src = 'imagen-desarrollowebcom.gif';

Obtener el objeto imagen a partir de una imagen de la página

Si lo deseamos, podemos obtener el objeto imagen a través de una de las imágenes que haya en la página donde estamos trabajando, es decir, alguna etiqueta IMG del documento HTML actual.

Para ello podemos acceder a ese elemento con un document.getElementById(), indicando el identificador (atributo id) de la imagen que deseemos.

var img = document.getElementById("im1");

Esto nos recuperaría el objeto Image asociado con la etiqueta IMG que tiene el identificador id="im1".

También podemos acceder a cualquiera de las imágenes de la página a través del array de imágenes, "Images", que depende del objeto document.

var img = document.images[1];

Con esto obtenemos el objeto Image de la segunda etiqueta IMG que hay en la página.

Obtener el objeto Image a través de data: url

Otro método es utilizar una imagen expresada como cadena de caracteres codificada con formato Base64, en un esquema llamado data: url.

var img = new Image();
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

Con el código anterior tendríamos un objeto imagen a partir de una cadena de texto. La imagen es pequeña, por eso el código de la imagen también es corto.

Este formato data: url no está disponible en todos los navegadores, aunque los más modernos sí lo soportan, como Firefox, Chrome, Opera o Internet Explorer a partir de la versión 8.

Para saber si tu navegador es compatible con ese formato, coloca este código:

document.images[0].src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

Esto altera el atributo src de la primera etiqueta IMG de la página y por tanto cambiará la imagen que se ve en el navegador. Obviamente tendremos que tener una imagen por algún lado en la página para que esa instrucción funcione.