Canvas a pěkné obtékání obrázku

Obtékání obrázků (a čehokoliv jiného) je v kaskádových stylech řešeno na úrovni bloků. Na papírovém médiu se ale můžeme setkat i s jemnějším obtékáním, které respektuje nepravidelný tvar obrázku.

Jacob Seidelin se pokusil jemný druh obtékání nasimulovat pomocí běžného HTML+CSS s pomocí JavaScriptu a canvasu. Stačí, abyste do stránky vložili obrázek s průhledným pozadím, nastavili mu správnou třídu (v našem případě "sandbag-left") a jednoduchý skript PrettyFloat se o zbytek postará.

Výsledek je celkem přesvědčivý (zatím jen ve Firefoxu a Opeře).

Jak to funguje? Canvas umožňuje přistupovat k obrázkům na úrovni jednotlivých pixelů. Skript zanalyzuje obrázek a nahradí jej sadou divů o výšce cca jednoho řádku textu, každému z nich nastaví adekvátní šířku a na pozadí napozicuje původní obrázek tak, aby jednotlivé divy daly vizuálně dohromady obrázek původní. Vše proběhne při onloadu a rozumně rychle. Mechanismus je postaven na metodě, která byla prvně popsána na Alistapart.

Vše se řídí pravidlem graceful degradation (v ostatních prohlížečích uvidíte klasické obtékání).

Nejedná se o jediný způsob zpracování obrázku pomocí canvasu, našli bychom knihovny na zaoblování rohů, vytváření zrcadlových obrazů atd. Přemýšlím, zda se podobné metody jednou ujmou stejně jako je dnes běžný SIFR.

Pozn.: Nejedná se o univerzální způsob, prohlížeč totiž povolí v canvasu zpracovávat jen obrázky ze stejné domény. Porušit toho omezení je nežádoucí (na pozadí by prohlížeč mohl např. lámat cizí captchy a uživatel by o tom neměl ponětí).

(Zdroj: nihilogic.dk)