Bináris képállomány megjelenítése – HTML

Nagyon gyakori, hogy képállományokat bináris formában (jellemzően base64 kódolással) kell kezelni. Jó példa erre a webes kommunikáció, ahol ugye szükséges a „szerializálás” (kicsit azért furcsa, így magyarosan leírva):

„Serialization is the process of converting the state of an object into a form that can be persisted or transported. „

(from: http://msdn.microsoft.com/en-us/library/7ay27kt9(v=vs.110).aspx)

Vagy kicsit „szemléletesebben” megfogalmazva:

It lets you take an object or group of objects, put them on a disk or send them through a wire or wireless transport mechanism, then later, perhaps on another computer, reverse the process: resurrect the original object(s). The basic mechanisms are to flatten object(s) into a one-dimensional stream of bits, and to turn that stream of bits back into the original object(s).
Like the Transporter on Star Trek, it’s all about taking something complicated and turning it into a flat sequence of 1s and 0s, then taking that sequence of 1s and 0s (possibly at another place, possibly at another time) and reconstructing the original complicated „something.”

(from: http://www.parashift.com/c++-faq-lite/serialize-overview.html)

És hogy miért base64? Szerintem leginkább történelmi okai vannak (de van ehhez kapcsolódóan egy jó stackoverflow thread is itt):

„Base64 encoding schemes are commonly used when there is a need to encode binary data that needs to be stored and transferred over media that are designed to deal with textual data.”

(from: http://en.wikipedia.org/wiki/Base64)

Visszatérve a megjelenítés kérdésére: ha néha szeretnénk is megnézni az ilyen elkódolt állományokat, azok tartalmát (mondjuk egyszerűen csak vizuális ellenőrzés céljából), akkor jó hasznát vehetjük a HTML <IMG> tag-nek:

Általánosabban:

Gyors megtekintéshez használható pl. a W3School Try It Editor-a, de bármilyen plain text editor is tökéletes egy alap HTML oldallal.

A fentiekből adódóan elvi lehetőség továbbá weboldalaink esetében, hogy a kép állományokat ne a szokásos eléréssel hivatkozzuk, hanem data-URI-ként. Azért mondom hogy elvi, mert nagyobb képek esetében lassú lesz (lásd pl. az alábbi tanulmányt itt.)

Az alábbi kép is így került beemelésre, ami a forráskód megtekintésekor látható is lesz. (Egyébként a WordPress nem nagyon támogatja ezt a megoldást, csak HTML nézetben használható, a grafikus megjelenítésre váltás esetén az ilyen <IMG> tag egyszerűen elveszik, plusz az előnézet funkció is néha megzavarodik.)

Vélemény, hozzászólás?

FIGYELEM! Ez a bejegyzés több mint egy éves, így a benne szereplő információk is ennek megfelelően kezelendőek! Az esetleges frissítések minden esetben külön megjelöltek.