O webu
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.

  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ží.

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

Odkazy jinam

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