Képek használata - web interfészek api, mdn
A képek vászonba való importálása alapvetően két szakaszból áll:
- Azáltal, hogy hivatkozásként adja meg a.>> HTMLImageElement objektumot vagy egy másik vászonelemet forrásként, akkor is használhatja a képet azáltal, hogy linket ad az URL-nek.
- A kép vászonra történő rajzolásához használja a drawImage () függvényt.
Lássuk, hogyan kell csinálni.
Képek rajzolásához
A Canvas API a képforrásként az alábbi típusú adatokat használja:
Ezek a források együttesen CanvasImageSource típusúak.
Többféle módon lehet képet készíteni vászonra.
Képek ugyanazon az oldalon
A vászon ugyanazon oldalán található képhez egy linket kaphatunk az alábbi módokon:
- document.images gyűjtemény
- A document.getElementsByTagName () metódus
- Ha ismeri a használni kívánt kép idét, használhatja a document.getElementById () függvényt. hogy megkapja ezt a különleges képet
Más tartományokból származó képek használata
A crossorigin attribútum HTML eleme a képek leírásához. "> elem (a HTMLImageElement.crossOrigin tulajdonság jelenik meg), engedélyt kérhet egy másik domain betöltésére a drawImage () -hoz. Ha a tárhely domain lehetővé teszi az interdomain-képhez való hozzáférést, akkor a kép a vászonban használható anélkül, hogy megzavarná, különben tönkreteheti a vásznat.
Más vászonelemek használata
Mivel a normál képek azt hozzáférést más vászon elemek segítségével akár document.getElementsByTagName () vagy document.getElementById () módszer. Ellenőrizze, hogy a vászonforrás már tartalmazott valamit, mielőtt felhasználná a vászonképen.
Az egyik kényelmes mód az lenne, ha a második vászonelemet egy másik nagyobb vászonkép bélyegképeként használnánk.
Képek létrehozása a semmiből
Egy másik módja az újak létrehozása. "> HTMLImageElement objektumok a szkriptben Ehhez használhatja a praktikus Image () konstruktort:
A parancsfájl végrehajtásakor a kép betöltődik.
Ha megpróbálja felhívni a function drawImage () függvényt, mielőtt a kép betöltődik, a szkript nem fog semmit tenni (vagy a régebbi böngészőkben esetleg kivételt is adhat). Ezért a terhelési eseményt úgy kell használni, hogy a kép betöltése előtt ne próbálja meg ezt tenni:
Ha csak egy harmadik fél képét használja, akkor ez a módszer jó példa lehet, de ha több képet kell figyelnie, akkor valami intelligensebbet kell találnia. Bár a képfeltöltés ellenőrzésére alkalmazott taktika keresés túlmutat ezen a tanfolyamon, ezt szem előtt kell tartani.
A kép csatolása az adatok felhasználásával: URL
A kép egy másik lehetséges beillesztési módja az adatokon keresztül: url. Az adatok URL-címei lehetővé teszik, hogy a képet közvetlenül Base64 kódolt karakterláncként azonosítsa közvetlenül a kódjába.
Ennek a módszernek néhány hátránya, hogy a kép nem kerül gyorsítótárba, és a nagyobb méretű képek esetében a kódolt URL nagyon hosszú folyamat lesz.
Képek rajzolása
Miután kaptunk egy hivatkozást a képobjektum forrására, a drawImage () metódust felhasználhatjuk a vászonba. Amint látni fogjuk, a drawImage () metódus túlterhelt, és számos opcióval rendelkezik. Az alapváltozatban ez úgy néz ki, mint:
drawImage (kép, x, y) Rajzi a (x. y) koordinátákban a CanvasImageSource-ban megadott képet.
Az SVG-képeknek meg kell adniuk a gyökér szélességét és magasságát
Példa: Egy egyszerű vonaldiagram
A következő példában egy külső képet használunk háttérként egy kis lineáris grafikonra. A háttértámogatással a script sokkal kisebb lehet, mivel elkerülhetjük, hogy kódot kell írni a háttér létrehozásához. Ebben a példában csak egy képet használunk, ezért a rajzi operátorok futtatásához a terhelésobjektum képfájl-kezelőjét használom. A drawImage () metódus meghatározza a háttér helyét a koordinátákkal (0, 0), amelyek a vászon bal felső sarkához vannak kötve.
Az így kapott grafikon így néz ki: