Diferite moduri de accesare a obiectelor de imagine JavaScript

Acesta este un atelier JavaScript care este, de asemenea, încadrat în manualul de procesare a imaginilor JavaScript. Vom învăța să obținem obiecte de imagine JavaScript, pe care le putem folosi atunci pentru ceea ce vrem.

Vom arăta mai multe moduri pe care trebuie să le facem acest pas, mai general și mai evident și altcineva mai specific determinat medii de lucru. În cele din urmă, primim întotdeauna același lucru, o variabilă care are în interiorul unui obiect de imagine.

Creați o imagine din codul JavaScript

cea mai directă modalitate este de a crea obiectul dvs. de imagine (JavaScript Obiect) Instanță Un obiect al imaginii imaginii, în acest fel:

var objimagen = imagine nouă ();

Apoi am putea atribui valori diferitelor proprietăți ale obiectului de imagine, pentru ao configura. De exemplu:

img.src = „imagine-dezvoltarewebcom.gif ‘;

Obțineți obiectul de imagine dintr-o imagine a paginii

dacă dorim, putem obține Obiectul imaginii printr-una dintre imaginile de pe pagina unde lucrăm, adică o etichetă IMG a documentului HTML actual.

Pentru aceasta putem accesa acest element cu un document.getelementbyid (), indicând identificatorul (ID-ul atributului) al imaginii pe care dorim-o.

var img = document.getelementbyid („im1”) ;

acest lucru ar recupera obiectul Imagine IMG asociat cu eticheta IMG care are identificatorul.

Putem accesa și oricare dintre imaginile de pe matricea de imagini, „imagini”, depinde de obiectul documentului.

var img = document.images;

Cu aceasta obținem obiectul de imagine al celei de-a doua etichete IMG de pe pagină.

Obțineți imaginea obiectului Date: URL

Alte metode este de a utiliza o imagine exprimată ca șir de caractere codate de bază64, într-o schemă numită date: URL.

VAR IMG = imagine nouă ();
IMG.SRC = ‘ Date: imagine / gif; Base64, R0lgodlHCwalAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASAAAIA + HKCU4LMNVINDO7QYRIXIGBYOW == ‘NOTĂ: Gândiți-vă la diferența dintre salvarea imaginii într-un fișier grafic și salvarea acestuia pe un șir de caractere din codul dvs. JavaScript. Există două variante radical diferite și, prin urmare, au particularități diferite. Avantajul este că nu trebuie să faceți conexiuni cu serverul pentru a aduce aceste imagini și că nu vom fi nevoie să le predați. Dezavantajul este că imaginile nu sunt prinse și că, dacă sunt foarte mari, ele generează un cod foarte lung.

cu codul anterior am avea un obiect de imagine dintr-un șir de text. Imaginea este mică, astfel încât codul de imagine este, de asemenea, scurt.

Acest format de date: URL-ul nu este disponibil în toate browserele, deși cel mai modern îl susțineți, cum ar fi Firefox, Chrome, Opera sau Internet Explorer din versiunea 8.

pentru a afla dacă browserul dvs. este compatibil cu acel format, plasați acest cod:

document.images.src = ‘Date: imagine / gif; base64, r0lgodlhcwaliaaaaaaaa3pn Acest lucru modifică atributul SRC al primei etichete IMG de pe pagină și, prin urmare, va schimba imaginea care este văzută în browser. Evident, va trebui să avem o imagine undeva pe pagină, astfel încât această instrucțiune să funcționeze.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *