sobota 12. dubna 2008

Firefox 3 umí uložit obsah canvasu

Canvas je novou HTML značkou, která umožňuje vývojářům kreslení přímo do webové stránky. Nedávno jsem si všiml, že se v uživatelském rozhraní Firefoxu 3 objevila možnost uložit canvas jako obrázek.

Canvas sám o sobě podporuje vygenerování fyzického obrázku. Vývojářům stačí zavolat jeho metodu .toDataURL(), která vygeneruje obrázek z aktuálního obsahu canvasu. Vývojáři tak mohou nabídnout uživateli vygenerovaný obrázek ke stažení nebo naopak uložit vykreslený obsah canvasu na server. Vyzkoušet si to můžete na jednoduchém příkladu (obrázek vygenerujete přímo kliknutím na canvas).

Firefox 3 jde ale ještě o krok dál a nabízí stejnou možnost přímo v uživatelském rozhraní. Z pohledu uživatele se tak zastírá rozdíl, co je skutečný obrázek, a co je obrázek vykreslený canvasem. Oba se navenek chovají stejně a uživatel mezi nimi ani nemusí poznat rozdíl.



Vyzkoušet si to můžete například na stránce Canvex (pěkný pokus o implementaci Dooma připomínajícího herního enginu v prohlížeči). Kdykoliv zobrazíte na hrací ploše kontextové menu, můžete si ve formátu PNG uložit obrázek aktuálního dění ve hře.

Jsem zvědav, zda se tím budou inspirovat i ostatní prohlížeče.

2 komentáře:

  1. Nenativně to umí nejenom Firefox.
    http://www.nihilogic.dk/labs/canvas2image/

    OdpovědětVymazat
  2. Daniel: Knihovna canvas2image je jen zabalením metody .toDataURL(), o které píšu ve druhém odstavci a kterou by měly podporovat všechny implementace canvasu (např. Safari 3.1 ji ještě nepodporuje, ale poslední noční verze již ano).

    Firefox jako jediný tuhle funkci integroval do GUI prohlížeče (interně zavolá opět stejnou metodu .toDataURL()), což je pro mne docela zajímavý nápad a jistý posun ve vnímání canvasu jako takového. To už musí udělat vývojáři prohlížečů, to autor stránky žádnou knihovnou nasimulovat nedokáže.

    OdpovědětVymazat

Poznámka: Komentáře mohou přidávat pouze členové tohoto blogu.