Grafický editor v prohlížeči

Při tvorbě základního grafického editoru přímo v prohlížeči máme v zásadě 3 možnosti.

1. Jako pozadí plátna použít původní obrázek a nad ním vytvářet úpravy překrýváním absolutně posicovanými HTML elementy.

   Při volbě Uložit potom souřadnice, rozměry nebo text poslat na server, kde se obrázek překreslí.

   Jedná se o hodně pracnou metodu, neboť se kreslení bude muset realisovat dvakrát.

2. Použít element <canvas>. Do toho lze kreslit poměrně snadno a není problém výsledek uložit převedením na data URL (canvas.toDataURL()), z čehož výsledný obrázek vyrobí krátký PHP skript, který se může volat AJAXem:

   if (isset($_GET["data"])) {
     $img = str_replace('data:image/png;base64,', '', $_GET["data"]);
     $img = str_replace(' ', '+', $img);
     $data = base64_decode($img);
     $filename = md5($data) . ".png";
     file_put_contents($filename, $data);
     echo $filename; // vrátí název souboru
   }

   Zásadní nevýhoda <canvas>u tkví v tom, že je nízkoúrovňový – jednotlivé objekty se ihned po nakreslení stanou součástí obrázku. Je proto značně komplikované provádět primitivní úkony jako přesun nakresleného objektu, protože se musí počítat pixel po pixelu a celé plátno neustále překreslovat od nuly.

   • Jednoduchá ukázka přesunu s překreslováním
   • HTML5 Canvas Drag, Drop, and Resize Images – přesun objektů v <canvas>u pomocí KineticJS

3. Použít SVG, kde je každý objekt representován značkou v DOMu, a před uložením ho nakreslit do <canvas>u, který se potom převede na data URL a uloží.

   • Ukázka vektorového editoru používající SVG
   • Raphaël – JS knihovna zjednodušující práci s vektorovou grafikou
   • Method Draw
   • svg-edit (demo)

   Živá ukázka převodu SVG na data URL

Odkazy jinam

• Photopea – online Photoshop – dokáže otevří PSD soubory