Diferentes xeitos de acceder a obxectos de imaxe Javascript

Este é un taller de JavaScript que tamén está enmarcado dentro do manual de procesamento de imaxes de JavaScript. Aprenderemos a obter obxectos de imaxe de JavaScript, que podemos usar para o que queremos.

Amosaremos varias das formas que temos que facer ese paso, máis xeral e obvio e outro determinado determinado ambientes de traballo. Ao final, sempre obtemos o mesmo, unha variable que ten dentro dun obxecto de imaxe.

Crear unha imaxe do código JavaScript

O xeito máis directo é crear o seu obxecto de imaxe (obxecto de imaxe de JavaScript) Instancia dun obxecto da imaxe de imaxe, deste xeito:

var objimagen = nova imaxe ();

Entón poderiamos asignar valores ás diferentes propiedades do obxecto da imaxe, para configuralo. Por exemplo:

img.src = ‘Image-develowebcom.gif’;

Obter o obxecto da imaxe dunha imaxe da páxina

Se o desexamos, podemos conseguir O obxecto da imaxe a través dunha das imaxes da páxina onde estamos a traballar, é dicir, algunha etiqueta IMG do documento HTML actual.

Para iso podemos acceder a ese elemento cun documento.getElementByID (), indicando o identificador (ID de atributo) da imaxe que queremos.

var img = document.getelementbyid (“IM1”) ;

Isto recuperaría a imaxe do obxecto IMG asociado á etiqueta IMG que ten o identificador.

Tamén podemos acceder a calquera das imaxes da matriz de imaxe, “imaxes”, el depende do obxecto do documento.

var img = document.images;

Con isto obtemos o obxecto da imaxe da segunda etiqueta IMG na páxina.

Obter a imaxe do obxecto a través Datos: URL

Outro método é usar unha imaxe expresada como unha cadea de caracteres codificada de base64, nun esquema chamado Datos: URL.

VAR IMG = Nova imaxe (); Datos: image / gif; base64, r0lgodlhcwalaiaaaaaa3pn / zih5baeaaaaaaaaaaalaasaaaaiha + hkcuo4lmnvindo7qyrixigbyow == ‘;

Nota: Pense na diferenza entre gardar a imaxe nun ficheiro gráfico e gardalo nunha cadea de caracteres no seu código JavaScript. Hai dúas variantes radicalmente diferentes e, polo tanto, teñen diferentes particularidades. A vantaxe é que non tes que facer conexións co servidor para traer esas imaxes e que non necesitaremos prelarlas. A desvantaxe é que as imaxes non son capturadas e que se son moi grandes, xeran un código moi longo.

Co código anterior teriamos un obxecto de imaxe desde unha cadea de texto. A imaxe é pequena, polo que o código de imaxe tamén é curto.

Este formato de datos: URL non está dispoñible en todos os navegadores, aínda que o máis moderno o apoia, como Firefox, Chrome, Opera ou Internet Explorador da versión 8.

Para saber se o seu navegador é compatible con ese formato, coloque este código:

document.images.src = ‘Datos: Imaxe / gif; base64, r0lgodlhcwalaiaaaaa3pn / zih5baaaaaaaaaaaalaasaaaaiha + hkcuo4lmnvindo7qyrixigbyow == ‘;

Isto altera o atributo SRC da primeira etiqueta IMG na páxina e, polo tanto, cambiará a imaxe que se ve no navegador. Obviamente teremos que ter unha imaxe nalgún lugar da páxina para que esta instrución funcione.

Deixa unha resposta

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *