Aquest és un Taller de Javascript que a més s’emmarca dins el Manual de l’tractament d’imatges de Javascript. Anem a aprendre a obtenir objectes Image de Javascript, que després podem utilitzar per al que desitgem.
Anem a mostrar diverses de les maneres que tenim per fer aquest pas, algunes més generals i òbvies i altres més específiques de entorns de treball determinats. A la fin sempre obtenim el mateix, una variable que té dins un objecte Image.
Crear una imatge des de codi Javascript
La manera més directa és crear el teu objecte imatge (objecte Image de Javascript) instanciant 1 objecte de la classe Image, d’aquesta manera:
var objImagen = new Image ();
Després podríem assignar valors a les diferents propietats de l’objecte imatge, per configurar-la. Per exemple:
img.src = ‘imatge-desarrollowebcom.gif’;
Obtenir l’objecte imatge a partir d’una imatge de la pàgina
Si ho desitgem, podem obtenir l’objecte imatge a través d’una de les imatges que hi hagi a la pàgina on estem treballant, és a dir, alguna etiqueta IMG de el document HTML actual.
Per això podem accedir a aquest element amb un document.getElementById (), indicant l’identificador (atribut id) de la imatge que desitgem.
var img = document.getElementById ( “IM1”);
Això ens recuperaria l’objecte Image associat amb l’etiqueta IMG que té l’identificador.
També podem accedir a qualsevol de les imatges de la pàgina a través de l’array d’imatges, “images “, que depèn de l’objecte document.
var img = document.images;
Amb això obtenim l’objecte Image de la segona etiqueta IMG que hi ha a la pàgina.
Obtenir l’objecte Image a través de data: url
un altre mètode és utilitzar una imatge expressada com a cadena de caràcters codificada amb format Base64, en un esquema anomenat data: url.
var img = new Image ();
img.src = ‘data: image / gif; base64, R0lGODlhCwALAIAAAAAA3pn / ZiH5BAEAAAEALAAAAAALAAsAAAIUhA + hkcuO4lmNVindo7qyrIXiGBYAOw ==’;
Amb el codi anterior tindríem un objecte imatge a partir d’una cadena de text. La imatge és petita, per això el codi de la imatge també és curt.
Aquest format data: url no està disponible en tots els navegadors, encara que els més moderns sí que ho suporten, com Firefox, Chrome, Opera o Internet Explorer a partir de la versió 8.
Per saber si el teu navegador és compatible amb aquest format, posi el codi:
document.images.src = ‘data: image / gif; base64, R0lGODlhCwALAIAAAAAA3pn / ZiH5BAEAAAEALAAAAAALAAsAAAIUhA + hkcuO4lmNVindo7qyrIXiGBYAOw == ‘; a
Això altera l’atribut src de la primera etiqueta IMG de la pàgina i per tant canviarà la imatge que es veu al navegador. Òbviament haurem de tenir una imatge per algun costat a la pàgina perquè aquesta instrucció funcioni.