Importarea imaginilor în pânză constă în principal în 2 etape:
- Oferind o referință la obiectul "> HTMLImageElement sau la un alt element de canvas ca sursă, puteți utiliza și imaginea prin trimiterea unui link către URL.
- Pentru a desena o imagine pe pânză, utilizați funcția drawImage ().
Să vedem cum să facem asta.
Utilizarea imaginilor pentru a desena
Canvas API poate folosi toate tipurile de date ca sursă de imagine:
Aceste surse sunt denumite colectiv ca tipul CanvasImageSource.
Există mai multe moduri de a obține imagini pentru utilizare pe panza.
Utilizarea imaginilor din aceeași pagină
Putem obține un link la imaginea de pe aceeași pagină de pe panza utilizând unul dintre modurile:
- document.images collection
- Metoda document.getElementsByTagName ()
- Dacă cunoașteți idul imaginii pe care doriți să o utilizați, puteți folosi document.getElementById (). pentru a obține această imagine particulară
Utilizarea imaginilor din alte domenii
Folosind atributul crossorigin este un element HTML pentru descrierea imaginilor. "> element (afișat proprietăți HTMLImageElement.crossOrigin), puteți solicita permisiunea de a încărca un alt domeniu pentru a fi utilizat în drawImage (). Dacă domeniul de hosting permite accesul imaginii pe mai multe domenii, imaginea poate fi utilizată în pânza ta, fără, fără să se păteze pe ea, altfel se poate strica panza.
Utilizarea altor elemente de panza
Ca și în cazul imaginilor normale, am avea acces la alte elemente de panza folosind fie document.getElementsByTagName () sau document.getElementById () metoda. Verificați dacă sursa de panza are deja ceva desenat înainte de ao folosi în imaginea țintă a panzei.
O modalitate convenabilă ar fi utilizarea celui de-al doilea element de panza ca o miniatură a unei alte imagini mai mari de panza.
Crearea imaginilor de la zero
O altă modalitate este de a crea altele noi. "> Obiecte HTMLImageElement în scriptul nostru Pentru a face acest lucru, puteți folosi constructorul Image () la îndemână:
Când acest script este executat, imaginea începe să se încarce.
Dacă încercați să apelați funcția drawImage () înainte de imaginea este încărcată, script-ul nu face nimic (sau, în browsere mai vechi, poate chiar arunca o excepție). Prin urmare, trebuie să utilizați evenimentul de încărcare astfel încât să nu încercați să faceți acest lucru înainte de încărcarea imaginii:
Dacă utilizați o singură imagine a unei terțe părți, atunci această metodă poate fi un bun exemplu, dar dacă aveți nevoie să monitorizați mai multe imagini, trebuie să veniți cu ceva mai inteligent. Deși căutarea tacticilor pentru verificarea încărcărilor imaginilor este dincolo de sfera acestui curs de formare, ar trebui să păstrați acest lucru în minte.
Fișier atașat utilizând date: URL
O altă posibilă modalitate de a include o imagine este prin datele: url. Datele URL de date vă permit să identificați complet imaginea ca șir de caractere codate Base64 direct în codul dvs.
Unele dezavantaje ale acestei metode sunt că imaginea dvs. nu este stocată în cache, iar pentru imaginile cu dimensiuni mai mari, urlul codat poate deveni un proces foarte lung.
Desenarea imaginilor
Odată ce primim o referință la sursa obiectului imagine, putem folosi metoda drawImage () pentru ao include în panza. După cum vom vedea, metoda drawImage () este supraîncărcată și are mai multe opțiuni. În versiunea de bază arată:
drawImage (imagine, x, y) Desenează imaginea specificată în coordonatele CanvasImageSource în (x. y).
Imaginile SVG trebuie să specifice lățimea și înălțimea rădăcinii
Exemplu: Un grafic liniar simplu
În următorul exemplu, vom folosi o imagine externă ca fundal pentru un grafic liniar mic. Utilizarea fundalurilor poate face scriptul mult mai mic, pentru că putem evita să scriem coduri pentru a crea un fundal. În acest exemplu, folosim doar o singură imagine, așa că folosesc manipularea evenimentului de imagine pentru obiectul de încărcare pentru a executa operatorii de desen. metoda drawImage () care definește poziția fundalului cu coordonatele (0, 0), care sunt legate de colțul din stânga sus al pânzei.
Graficul rezultat arată astfel:
Articole similare
Trimiteți-le prietenilor: