Grafika beágyazása weboldalra
Az Image.Save () metódus használatával a képre a válaszfolyamba írhatunk, hogy felülírjuk azokat az információkat, amelyeket az ASP.NET keretrendszer egyébként használ.
Szerencsére egyszerűbb megoldás. Használhatja a HTML-leírót vagy a webes képvezérlést, de ahelyett, hogy egy statikus képet forrásként megadna, be kell kötnie a dinamikus képet generáló .aspx fájlt.
Vegye figyelembe például a GDI + által létrehozott grafikákat az előző cikkben. Ez egy fájlban tárolja, és azt írja, SimpleDrawing.aspx dinamikusan generált kép válaszként patak (a példákban a file stream). Nyomtatás a dinamikus kép egy másik oldalon lehet, hozzáadva és telepíteni SimpleDrawing.aspx fényképek Web ellenőrzés az ingatlan értékét imageurl (a generált fájl). Ezután hozzáadhat más vezérlőket, vagy akár több olyan képkezelőt is, amelyek ugyanarra a tartalomra kapcsolódnak.
Az alábbi ábra egy példát mutat be, amelyben két leíró használható , amelyek a SimpleDrawing.aspx fájlra mutatnak, valamint számos további ASP.NET Web vezérlőt. közöttük:
A PNG formátum használata
A PNG egy olyan univerzális formátum, amely mindig kiváló minőségű, és kombinálja a veszteségmentes tömörítést a GIF képekkel a JPEG színes támogatási lehetőségeivel. Néhány böngésző (különösen az Internet Explorer régebbi verziói) helytelenül jeleníti meg a PNG-képeket, amikor dinamikusan térnek vissza az oldalról. A kép tartalmának helyett a felhasználó egy üzenetet kap egy javaslattal, hogy letöltse a kép tartalmát és megnyissa azt egy másik programban. A probléma megoldásához alkalmazhatja a korábban tárgyalt megközelítést egy leíróval .
A PNG-képek dinamikus generálásával kapcsolatos másik probléma az előző cikkben tárgyalt Bitmap.Save () módszer használatának képtelensége. Response.OutputStream egy lineáris folyamat, azaz. az adatokat az elejétől a végéig egymás után kell írni. PNG fájl létrehozásához a .NET-szoftvernek képesnek kell lennie arra, hogy navigáljon a fájlban oda-vissza, amely olyan streamet igényel, amely bizonyos pozíciókra átmenetet biztosít.
A megoldás meglehetősen egyszerű. Ahelyett, hogy a mentést közvetlenül a Response.OutputStream-ra mentettük volna, létre kell hoznia egy System.IO.MemoryStream streamet, amely egy adatpuffer a memóriában. Hívja a Bitmap.Save () gombot a kép mentéséhez a MemoryStream streambe, majd írja a MemoryStream-ot a Response.OutputStream streambe.
A megoldás végrehajtásához szükséges kód, feltéve, hogy a System.IO névtér importált, a következő megjelenésű:
Információk átvitele dinamikus képekre
Amikor grafikákat generál weboldalakon, információkat küldhet az oldalról a kódra, amely ténylegesen generálja a grafikát, hogy valóban dinamikus képeket hozzon létre. A következő példa létrehoz egy adathoz kötött listát, amely az ebben a könyvtárban tárolt bitképek bélyegképét jeleníti meg. A végeredmény az alábbi ábrán látható:
Ennek az oldalnak két részből kell állnia: egy olyan oldal, amely GridView-vezérlőt tartalmaz, valamint egy olyan oldal, amely dinamikusan megjeleníti az egyes indexképeket. A lista feltöltéséhez a GridView oldal ismételten felhívja a vázlatlapot (leírók használatával) ).
Elképzelhető, hogy először olyan oldalt készítsen, amely létrehoz egy vázlatot. Ebben a példában az oldal neve ThumbailsViewer.aspx. Annak érdekében, hogy ez az összetevő a lehető legegyesebb legyen, ne mereven kódoljon semmilyen információt a használt könyvtárról vagy a vázlat méretéről. Ehelyett ezeket az információkat a lekérdezés három karakterlánc argumentumával lehet elérni.
Az oldal első letöltésekor meg kell győződnie arról, hogy az összes információ rendelkezésre áll. Az alapadat-készlet beérkezésekor a Bitmap és Graphics objektumok a szokásos módon hozhatók létre. Ebben az esetben a Bitmap objektum méretének meg kell egyeznie a vázlat méretével, mivel nem kell további tartalmat hozzáadnia. Vázlat létrehozása nem különösebben nehéz. Elég a kép betöltése (statikus Image.FromFile módszerrel), majd a rajz felületére. A kép rajzolásakor meg kell adnia egy kiindulási pontot (0, 0), valamint magasságot és szélességet. A magasság és a szélesség megfelel a Bitmap objektum méretének. A Graphics osztály automatikusan skálázza a képet e méretek alapján, az anti-aliasing használatával, hogy kiváló minőségű vázlatot készítsen.
A következő lépés az, hogy ezt az oldalt használja a GridView vezérlő oldalán. Az alaplap alapötlete, hogy a felhasználó megadja a könyvtár elérési útját, és kattintson a Küldés gombra. Ezen a ponton a kód elvégezhet néhány munkát a System.IO névtérosztályokkal. Először létre kell hoznia egy DirectoryInfo objektumot, amely a felhasználó által kiválasztott könyvtárat képviseli. Másodszor, a DirectoryInfo.GetFiles metódus használatával meg kell szereznie a FileInfo objektumokat, amelyek a könyvtárban lévő fájlokat képviselik. Végül a kódnak meg kell kötnie a FileInfo objektumok tömbjét a GridView-hoz, amint az a következő példában látható: