Si tratta di un workshop JavaScript che viene anche incorniciato all’interno del manuale di elaborazione delle immagini JavaScript. Impareremo ad ottenere oggetti immagine JavaScript, che possiamo quindi utilizzare per ciò che vogliamo.
Mostreremo molti dei modi in cui dobbiamo fare quel passo, alcuni più generali e ovvi e altri più specifici determinati ambienti di lavoro. Alla fine otteniamo sempre lo stesso, una variabile che ha all’interno di un oggetto immagine.
Creare un’immagine dal codice JavaScript
Il modo più diretto è quello di creare l’oggetto immagine (oggetto immagine javascript) Istanza Un oggetto dell’immagine immagine, in questo modo:
var objimagen = nuova immagine ();
Quindi potremmo assegnare valori alle diverse proprietà dell’oggetto immagine, per configurarlo. Ad esempio:
img.src = ‘image-sviluppowebcom.gif’;
Ottieni l’oggetto immagine da un’immagine della pagina
Se lo desideriamo, possiamo ottenere L’oggetto dell’immagine attraverso una delle immagini sulla pagina in cui stiamo lavorando, cioè un’etichetta IMG del documento HTML corrente.
Per questo possiamo accedere a quell’elemento con un document.getElementByID (), indicando l’identificatore (ID attributo) dell’immagine che vogliamo.
vamb img = Document.getElementbyID (“IM1”) ;
Ciò recupererebbe l’oggetto IMG dell’immagine associato al tag IMG che ha l’identificatore.
Possiamo anche accedere a qualsiasi immagini sull’array immagine, “immagini”, esso dipende dall’oggetto documento.
vamb img = document.images;
Con questo otteniamo l’oggetto immagine del secondo tag IMG sulla pagina.
Ottieni l’immagine dell’oggetto ATTRAVERS Dati: URL
Altro metodo è quello di utilizzare un’immagine espressa come una stringa di caratteri codificata di base64, in uno schema chiamato Data: URL.
VAR IMG = Nuova immagine ();
IMG.Src = ‘ Dati: immagine / gif; base64, r0lgodlhcwalaiaaaaaa3pn / zih5aaaaaaaaaaaaaaaaaiuha + hkcuo4lmnvindo7qyrixigbyow == ‘;
Con il codice precedente avremmo un oggetto immagine da una stringa di testo. L’immagine è piccola, quindi il codice immagine è anche breve.
Formato dati: URL non è disponibile in tutti i browser, anche se il più moderno lo supporti, come Firefox, Chrome, Opera o Internet Explorer dalla versione 8.
Per sapere se il tuo browser è compatibile con quel formato, posiziona questo codice:
document.images.src = ‘Dati: immagine / gif; base64, r0lgodlhcwalaiaaaaa3pn / Zih5Aaaaaaaaaaaaaaaaaiuhaaaaaaaaiuha + hkcuo4lmnvindo7qyrixigbyow == ‘;
Questo altera l’attributo SRC della prima etichetta IMG sulla pagina e quindi cambierà l’immagine che si vede nel browser. Ovviamente dovremo avere un’immagine da qualche parte sulla pagina in modo che questa istruzione funzioni.