Čárové kódy na webových stránkách

Čárové kódy známe všichni, jsou to ty podivné čárky a čísly na krabici mléka, sušenkách i kondomech.

Pokud ale vyvíjíte webové aplikace, může se dříve nebo později dostavit požadavek vložit čárový kód i do stránky určené k tisku (například faktura). Samotné vygenerování kódu není takový problém, existují k tomuto účelu desítky různých on-line generátorů i off-line generátorů. Tyto generátory pomocí parametrů v URL vygenerují obrázek, který se klasicky pomocí <img> vloží do stránky.

Samotný problém ale bývá s vložením kódu do stránky tak, aby se zobrazil i na počítači bez internetu (např. při uložení dokumentu na flešku) a aby při tisku nedocházelo k rozostření hran, které jsou způsobeny rozdílem DPI mezi obrazovkou a tiskárnou.

Kvalita tisku

Problém s kvalitou tisku obrázků řešil nedávno na svém blogu i Fakturoid. Řešení je vcelku jednoduché, stačí obrázek vygenerovat třeba ve dvojnásobných rozměrech a ten na stránce stlačit na původní rozměry pomocí <img width="..." height="..." >.

Prohlížeč potom na obrazovce zobrazí kód takřka stejně jako předtím, ale při tisku, který má mnohem drobnější rozlišení, se takový obrázek vykreslí se všemi detaily, tedy včetně ostrých hran čar.

Příklad můžete vidět na tomto čárovém kódu:

Stejný kód generovaný ve větším rozlišení:

Pozn.: Některé prohlížeče při tisku nevyhlazují obrázky a proto se mohou oba výše uvedené čárové kódy vytisknout zcela stejně.

Aby kód dobře vypadal dobře na obrazovce, je vhodné striktně dodržovat poměr 1:2 nebo 1:4, protože jinak se bude obrázek přepočítávat přes pixely a bude vypadat ošklivě a rozmazaně (na tisk to má ale minimální vliv).

Pokud už budete takto násilně upravovat velikost čárového kódu, můžete rovnou generovat obrázek o výšce 1px a velikost pak podle potřeby upravit ve stránce obdobným způsoben. U obrázků čárového kódu bez dalších prvků (např. popisku) lze libovolně měnit poměr obrázku, aniž by to mělo na kvalitu jeho zobrazení vliv.

Tisk bez internetu

Klasické vložení pomocí tagu <img src="http://domena.tld/obrazek.png"> má několik nedostatků:

1. Bez připojení k internetu se nic nezobrazí,
2. Není součástí dokumentu (což například u faktury představuje problém),
3. Obrázek se generuje při každém zobrazení faktury znovu,
4. Rozměry obrázku nejsou předem známé, protože ty se definují až při samotném generování podle množství dat.

Všechny uvedené problémy může vyřešit datové URL, tedy obrázek zakódovaný přímo ve zdrojovém kódu stránky. Jeho vytvoření lze v PHP zajistit pomocí funkce base64_encode() a výsledek vypadá následovně:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABVQAAAABCAIAAAC+HbKQ
AAAACXBIWXMAAAsSAAALEgHS3X78AAAAlUlEQVRIie2XUQrAIAxD1/sf2v0K25MUW61gPiWm0UZR
a609O2Bmv+O9n55DPhWO4oHqEpRaUWtcqansw4xP0vGua0ZzxgMhKkuKTlROlLnZfPJWLZMVzqai
SRyvJvEr9MLLOZ1/MznmZ+eEcHvx5d931FhHqUWokEnFW7VeEFbe1Rl1T3kHZnv2/hMVTWUu6UTt
QzZeWZgLDmfubaMAAAAASUVORK5CYII=" />

Je třeba ale zvážit, jaké bude primární použití takové faktury. Určitá omezení proto mohou dosáhnout na uživatele, kteří budou mít na svých počítačích starší Internet Explorer. Ten si s datovými URL moc nerozumí. Je proto vhodné toto nasazovat pouze v prostředí, kde lze ovlivnit volbu prohlížeče, například pro účely firemního intranetu. Mimo toto kontrolované prostředí lze datová URL využívat za předpokladu, že čárové kódy na dokumentu jsou pouhým doplňkem a netvoří nezbytnou součást takového dokladu.