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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Generátor náhodných obrázků

Generování náhodných obrázků

Pro vývoj a testování webů se hodí znát způsoby, jak v okamžiku vložit do stránky ilustrační obrázek.

Fotografie na pozadí

Velký obrázek na pozadí stránky

Jak správně udělat obrázkové pozadí celé stránky, které se přizpůsobí velikosti okna.

Vícenásobné CSS pozadí

Více obrázků na pozadí

Jak v CSS jednomu elementu přiřadit více obrázků na pozadí.

Lazy loading obrázků

Lazy loading obrázků

Načtení obrázků, až když je na ně odrolováno. Různé postupy řešení.

Zjištění barvy obrázku

Zjištění barvy obrázku

Jak v JavaScriptu i PHP zjistit hlavní barvu obrázku.

Komentáře