Obrázek vnořen do HTML
obrázek přenášený v html má výhodu třeba v posílaných fakturách, ukážeme si, jak na to.
Úvod
Pokusíme se přenášet obrázkovou informaci prostřednictvím HTML. Ve výsledku tedy nebudeme potřebovat obrázek a v html na něj odkazovat ale bude nám stačit pouze jeden soubor.
Rozbor problému: budeme muset využít technologie css, do nich nadefinujeme pozadi bloku jako bitmapový vzor, ten se převede do kódování base64 vložený přímo do CSS.
Technologie CSS
CSS je zkratka pro anglický název Cascading Style Sheets, česky tabulky kaskádových stylů. Je to jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Více najdete v encyklopedii.
Kódování base64
Na úvod mi dovolte, abych krátce pohovořil o rozdílu mezi šifrováním a kódováním – jenom aby nedošlo k nedorozumění. Šifrování je způsob, jak ochránit data před neoprávněným užitím. Nějakým způsobem jsou znečitelněna, aby pro neoprávněného uživatele nedávala smysl. Naproti tomu kódování (přestože jeho výsledek také může být zdánlivě nečitelný) slouží jako „obálka“ dat, způsob jejich „zabalení“ pro přepravu.
Base64 je kódovací algoritmus, který umožňuje jakákoliv binární data zakódovat takovým způsobem, že výsledkem jsou pouze běžné tisknutelné a snadno přenositelné znaky. Tedy velká a malá písmena anglické abecedy, číslice, znak plus a lomítko. Výsledek Base64 kódování jest tedy možno přenášet například prostřednictvím e-mailu, aniž by hrozilo nebezpečí, že bude podroben nějaké konverzi, která data poškodí.
Tento způsob kódování se používá především při formátování zpráv elektronické pošty a jejich příloh a při komunikaci HTTP protokolem (např. při předávání hesla při HTTP autentifikaci). Je vhodný zejména pro obecná binární data. Jeho nevýhodou je, že není běžně čitelný člověkem. Výhodou naopak je, že objem zakódovaných dat vzroste jenom o jednu třetinu.
Kódování Base64 funguje v podstatě velice jednoduše. Existuje abeceda 64 znaků (proto Base64), která sestává z velkých písmen anglické abecedy, malých písmen, číslic od 0 do 9, znaku plus a lomítka. Zdrojová data se převede do dvojkové soustavy, jako proud bitů. Jeden znak má vždy osm bitů. Následně se tento proud převede zpět na znaky abecedy Base64 takovým způsobem, že se rozdělí nikoliv po osmi bitech, ale po šesti (pomocí šesti bitů lze vyjádřit právě 64 stavů, tedy čísla od 0 do 63). Vzniklý výsledek je zformátován tak, aby na jednom řádku nebylo více než 76 znaků.
V praxi je to tak, že každé tři vstupní znaky
(mající 3 * 8 = 24 bitů)jsou zakódovány jako čtyři znaky
výstupní(nebo 24 / 6 = 4). Takže např. text AHOJ bude
zakódován jako QuhPSgAA. Více informací o kódování
Base64a jeho přesnou definici najdete v odpovídajícím
RFCčku
zdroj: http://archive.aspnetwork.cz/art/clanek.asp?id=141
Na převod obrázku do base64 existuje několik online nástrojů. Zde uvádím jeden z nich http://www.greywyvern.com/code/php/binary2base64.
Data URI schéma
Zobrazení obrázku pomocí HTML:
formát
data:[<MIME-type>][;base64],<data>
<html>
<head>
<title>test</title>
</head>
<body>
<img border="2" SRC="data:image/gif;base64,R0lGODdhMAAwAP
AAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQ
u5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5
YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0c
xOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVail
T6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7l
EewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4d
bgYKAAA7" ALT="Larry">
</body>
</html>
zdroj: http://en.wikipedia.org/wiki/Data:_URI_scheme
Problém je ale v nekompatibilitě prohlížečů. Toto běží v Gecku (Firefox) a Opeře. V exploreru toto nečekejte.