Designer – generování obrázků (napojení PHP na grafický program)

Dokázal by někdo poradit či nasměrovat, jak lze technicky sofistikovaně řešit tento designer?: Lettering Tool… Tzn. že návštěvník zadá text (může mít i více řádků), nastaví si různé parametry (např. font, šířku, výšku, zarovnání textu, různé efekty, apod. - viz. daná stránka) a je mu vygenerován náhledový obrázek. Podstatou je právě ono vygenerování obrázku. Může jít o jakýkoliv klasický obrázek, např. JPEG, PNG, apod. Zároveň je ale potřeba vygenerovat obrázek i ve formátu SVG (případně jiném vektorovém formátu, např. AI, CDR, EPS, PS, apod.). Předpokladem je asi napojení na nějaký grafický program ... nebo víte někdo o jiném adekvátním způsobu řešení? Dokáže někdo poradit nebo nasměrovat? Na té stránce (a takových je spousta) to nějak řešit musí. Všem adekvátním reagujícím moc děkuji. Důležitá poznámka (ať si ušetříme návrhy na již vyzkoušená a ne zrovna vhodná řešení):

V sofistikovanější verzi to (zřejmě) nelze řešit čistě skrze PHP. Ono to není úplně triviální. 1. problém je metrika fontů a různé typy fontů – někdy se např. písmenko "j" táhne přes 2 předchozí fonty, apod.. což může způsobit problémy "kerningu", atd. Těch "problémů" je ale celá řada. Rozměry musí být přesné. Když dá šířku 600 mm, musí být šířka 600 mm a příslušně spočítaná výška a i naopak.

Řešení "vlastními algoritmy" nepřichází v sofistikovanější verzi v úvahu, protože je to šíleně náročné (časově na práci, výpočetně na CPU, RAM, apod.) - objevuje se spousta chyb a nelze dobře pokrýt globálně různé fonty, atd. Opravdu spíš asi nějaké napojení na externí grafický program, co myslíte?

První na ránu připadá ImageMagick (ale jako program příkazové řádky, tedy nikoliv jen knihovna IMagick integrovaná do PHP). Ale když se do toho člověk blíže ponoří zjistí, že to fakticky moc použitelné není. Dost věcí by se muselo řešit "oklikou" a už jsme zase u "vlastních algoritmů" (a ještě hůř je na tom IMagick přímo v PHP). A GD knihovna zcela padá (tam by se většina věcí musela řešit vlastními algoritmy = nepoužitelné a hodně věcí ani řešit nelze). A co teprve efekty jako "kerning" (ten možná do jisté míry zvládá i Imagick), nějaká textura, zakřivení, stínování (lze vlastními algoritmy), zarovnání (též lze vlastními algoritmy), atd. atd. A "boundary box" nesedí u všech fontů, dá se to pak řešit oklikou, ale to je opět jedna oklika vedle druhé a šílenost, co sebou přináší další a další rizika chyb a složitých oprav.

Obrázek (PNG, JPEG) musí fyzicky existovat, pokud by se tedy požíval JavaScript (či jiné řešení na straně klienta), přesto se musí obrázek vygenerovat. Navíc je potřeba SVG verze obrázku (ono by možná stačilo řešit SVG a z něj generovat PNG).

Ideální by tu byl Adobe Illustrator, ale nemá příkazovou řádku, ani API, co teda vím. AI umí skripty, ale bohužel nezvládne paralelní zpracování a tak ani tato verze není použitelná, byť jinak by možná šla zrealizovat. CoreDraw asi neumí nic, co by se dalo jakkoliv využít. No skvělý je zde ImageMagick, bohužel ani ten (asi) není dostatečný (pokud Vás tedy něco nenapadá? ... je fakt, že toho zvládá opravdu hodně). Možná tedy nějaké "textové procesory"?

Běžet to může na vlastním VPS, na Linuxu i na Windows – oboje jde.

Jdete na to moc složitě. Řešil bych v javascriptu, náhled vykreslil na Canvas, s textem pak lze manipulovat real-time a výsledek exportoval do svg.Jinak Adobe Illustrator má SDk, takže ho můžete využívat dle potřeby. A lze ovládat i přes COM (bez dokumentace).

Napsal Jan Stejskal;1264435

Jdete na to moc složitě. Řešil bych v javascriptu, náhled vykreslil na Canvas, s textem pak lze manipulovat real-time a výsledek exportoval do svg.

Jinak Adobe Illustrator má SDk, takže ho můžete využívat dle potřeby. A lze ovládat i přes COM (bez dokumentace).

Moc Vám děkuji za odpověď. Myslíte, že skrze JavaScript a Canvas je možné dosáhnout i uvedených pokročilých úprav? Tzn. např. textur, zakřivení (Text Warp), kerningu pro různé fonty (viz. mé info ke "specifickým" fontům), stínů, atd. + dosáhnout přesných rozměrů (tzn. zadá-li např. šířku 250mm, bude šířka VIDITELNÉHO textu ... tedy bez "okrajů" kolem textu ... 250mm a výška se dopočítá ... a naopak?).Pokud jde o napojení na Adobe Illustrator, myslíte, že je to opravdu reálně proveditelné pro (pseudo)paralelní zpracování? Na stránce může být např. 100 návštěvníků a všem se musí vygenerovat obrázek "najednou". Nemýlím-li se, tak Illustrator "najednou" pracuje vždy jen s 1 obrázkem (jakoby "běží jen jedna instance").Případně, dokázal byste a měl zájem uvedené případně zrealizovat?

Přesně jak píše Jan Stejskal, vykreslit pomocí JS. Ten Canvas si můžete vyrenderovat klidně i na serveru a vracet až obrázek, ale to je prakticky jedno.Hezký tutoriál je tady: http://chimera.labs.oreilly.com/books/1234000001654/ch03.html a je tam také několik ukázek "možností" efektů :)

Napsal i-PRESS;1264439

Přesně jak píše Jan Stejskal, vykreslit pomocí JS. Ten Canvas si můžete vyrenderovat klidně i na serveru a vracet až obrázek, ale to je prakticky jedno.

Hezký tutoriál je tady: http://chimera.labs.oreilly.com/books/1234000001654/ch03.html a je tam také několik ukázek "možností" efektů :)

Moc Vám děkuji. Viz. ale má předchozí reakce k příspěvku pana Stejskala. Je takto možné vytvořit text přesné šířky / výšky, tzn. bez započtení "okrajů", které se kolem něj nacházejí? Obávám se, že je třeba se na to podívat hlouběji a uvažovat nad tím víc do hloubky. Ale možná mi opravdu jen něco uniká a nebo naopak ... opravdu uvažujeme píliš složitě.

Chce si to s tím pohrát a trošku nastudovat ale dají se s tím dělat i pokročilejší věci, viz třeba http://webglfundamentals.org/webgl/lessons/webgl-text-texture.htmlOhledně okrajů, to vůbec nevím jak myslíte. Pokud tam žádné okraje nevložíte, žádné tam nebudou.. Zakřivení atd lze realizovat celkem snadno: https://jsfiddle.net/AbdiasSoftware/e8hZy/---------- Příspěvek doplněn 06.02.2016 v 15:50 ----------Já se printem nezabývám, tak Vám asi dost dobře nerozumím, možná se chytne někdo z grafiků.Jestliže máte nějaký text, můžete jeho přesnou velikost změřit pomocí canvas measureText() a samozřejmě s ním můžete naopak manipalovat tak, aby dosáhl kýžené velikosti. Asi myslíte něco takového?EDIT: Zmizel tu příspěvek, na který jsem reagoval? :p

Napsal i-PRESS;1264443

Chce si to s tím pohrát a trošku nastudovat ale dají se s tím dělat i pokročilejší věci, viz třeba http://webglfundamentals.org/webgl/lessons/webgl-text-texture.html

Ohledně okrajů, to vůbec nevím jak myslíte. Pokud tam žádné okraje nevložíte, žádné tam nebudou.. Zakřivení atd lze realizovat celkem snadno: https://jsfiddle.net/AbdiasSoftware/e8hZy/

Pokud měříte velikost textu, tak většinou nedostanete přesnou velikost, protože kolem textu je jakoby "neviditelný okraj". Tzn. že když vytvoříte text o šířce 200mm (nebo řekněme 200px) ... ať už přímo nebo nepřímo např. přepočtem skrze např. font-size ... tak ve skutečnosti čistá šířka textu (tzn. v případě černé barvy té černé oblasti) bude např. 195mm/px. Funkce vracející Vám šířku zkrátka nevrátí "přesně šířku textu", což je ale právě to, co potřebujeme. Nejde o chybu, ale vlastnost - např. i když v Adobe Illustratoru zadáte šířku textu na 200mm/px, tak samotný text bude mít šířku menší. Řešení je třeba převést text na křivky a těm nastavit šířku 200mm/px. Přesná šířka se dá v PHP GD knihovně spočítat pomocí "boundary box", ale ani zde to pro všechny fonty nejde přesně a obecně jsou s tím v různých případech obrovské problémy.Zapomeňme na mm, vezmeme třeba pixely - je možné zde nějakým způsobem (ať už přímo nebo přepočtem) vytvořit text o přesné šířce / výšce např. 200px? Tím myslím opravdu výhradně jen oblast text (jako kdybych ho změřil pravítkem od okraje k okraji). Stejně tak je potřeba získat druhý (nezadaný rozměr - šířku / výšku).---------- Příspěvek doplněn 06.02.2016 v 15:46 ----------Umí to hodně věcí, řekněme, že efekty by byly dostačující. Pak jen dodám, že to co je vidět v "canvas" (případně ve vygenerovaném PNG obrázku) musí být přesně to, co bude v SVG. V SVG to musí přesně rozměrově odpovídat zadání - tak, aby když to člověk vytiskne (či pošle do řezačky), tak to přesně sedělo zadaným rozměrům (a dalším parametrům). Nevím, jak to generování do SVG probíhá, ale jestli v "křivkách", tak by to sedět asi mělo. Budu-li předpokládat (což by se samozřejmě ověřilo), že generátor do SVG je zcela spolehlivý, zůstává jen otázka řešení přesných rozměrů.Tedy, jak vygenerovat text o přesné šířce/výšce např. 200mm/px (a zjistit přesně druhý rozměr). Čistě textu (jakoby byl TĚSNĚ OHRANIČEN a toto ohraničení jste změřili). Toto je ten dost zásadní problém.

Zkuste např. toto:Tryit Editor v2.6…Píše to, že šířka "Hello World" je 155px, ve skutečnosti je 151px (zkuste "print-screen" a změřit v Malování). Toto je to, o čem mluvím.Jde o to, že většina funkcí pro měření textu nevrátí hodnotu TĚSNÉHO OHRANIČENÍ, ale kolem je různě velký "neviditelný okraj". Nejde o chybu, ale vlastnost. Např. i když v AI zadáte text o šířce 200mm/px, tak reálně bude jen 190mm/px - řešit se to dá tak, že se text převede na křivky a těm se nastaví 200mm/px.My potřebujeme přesný rozměr těsného ohraničení textu. V PHP toho lze docílit pomocí "boundary box" GD knihovny, ale u různých "specifických fontů" jsou i zde obrovské problémy.Jinak v SVG musí být rozměr přesný - když se pošle do tisku / řezačky, musí to být přesné.Zase mi zmizelo X odpovědí, omlouvám se, moc s tím neumím pracovat :-/

Nikdo netvrdí, že to bude bez práce. Pokud uvažujete, že dáte k dispozici stovky fontů, pak je to trochu problém. Ten neviditelný okraj o kterém píšete je totiž dán fontem, nastavením kerningu a je nutné si pro každý font definovat vlastní tabulku tak, aby text vypadal dobře a současně nevznikalo prázdné místo u prvního a posledního znaku (třeba u I, nebo naopak přesah třeba u O, Q).Tady pro inspiraci, je to tedy skript pro Indesign, ale princip je totožný: http://www.kahrel.plus.com/indesign/kern.html---------- Příspěvek doplněn 06.02.2016 v 18:04 ----------

Napsal kucera;1264437

Pokud jde o napojení na Adobe Illustrator, myslíte, že je to opravdu reálně proveditelné pro (pseudo)paralelní zpracování?

Technicky to možné je, ale prakticky se bude jednat o nepoužitelné řešení, bylo by to velmi pomalé, nelze obsluhovat více požadavků souběžně atd. Proto jsem psal, že na to jdete špatnou cestou.---------- Příspěvek doplněn 06.02.2016 v 18:22 ----------A nebo pak úplně jednoduchá varianta, ten proces zadávání rozměru otočit. Tedy vykreslit rámeček o dané velikosti a uživateli umožnit scale textu tak, aby si ho mohl do rámečku roztáhnout dle potřeby (tedy stejný postup, jako když to děláte ručně v illustrátoru). Co bude mimo rámeček například zobrazovat jinou barvou, aby s tím šlo pracovat na pixel přesně.

Napsal Jan Stejskal;1264470

Nikdo netvrdí, že to bude bez práce. Pokud uvažujete, že dáte k dispozici stovky fontů, pak je to trochu problém. Ten neviditelný okraj o kterém píšete je totiž dán fontem, nastavením kerningu a je nutné si pro každý font definovat vlastní tabulku tak, aby text vypadal dobře a současně nevznikalo prázdné místo u prvního a posledního znaku (třeba u I, nebo naopak přesah třeba u O, Q).

Tady pro inspiraci, je to tedy skript pro Indesign, ale princip je totožný: http://www.kahrel.plus.com/indesign/kern.html

---------- Příspěvek doplněn 06.02.2016 v 18:04 ----------

Technicky to možné je, ale prakticky se bude jednat o nepoužitelné řešení, bylo by to velmi pomalé, nelze obsluhovat více požadavků souběžně atd. Proto jsem psal, že na to jdete špatnou cestou.

---------- Příspěvek doplněn 06.02.2016 v 18:22 ----------

A nebo pak úplně jednoduchá varianta, ten proces zadávání rozměru otočit. Tedy vykreslit rámeček o dané velikosti a uživateli umožnit scale textu tak, aby si ho mohl do rámečku roztáhnout dle potřeby (tedy stejný postup, jako když to děláte ručně v illustrátoru). Co bude mimo rámeček například zobrazovat jinou barvou, aby s tím šlo pracovat na pixel přesně.

Děkuji Vám, v podstatě ale říkáte pouze to, co jsem uvedl už v prvním příspěvku. Tedy, že by se to dalo řešit za pomoci "vlastních algoritmů", které budou počítat to či ono, apod. To je ale přesně to, co nechceme - uváděl jsem, že to vede ke složitostem při hledáním a následné opravě chyb, navíc vždy u něčeho (např. jiného či "speciálního" fontu) narazíte na problém a tak musíte neustále vlastní algoritmy upravovat a rozšiřovat ... což je důvodem proč hledáme SOFISTIKOVANÉ řešení. Spousta grafických programů řeší sama spoustu věcí, nechceme je řešit tak, že si budeme programovat "vlastní algoritmy". Je to dokonce tak, že máme funkční řešení postavené čistě na PHP a Imagick. Ale je těžce rozšiřitelné, úpravy jsou časově i výkonově (na HW) náročné, řešení chyb je obtížné a ne vše, co potřebujeme je realizovatelné.K Illustratoru uvádíte to, co jsem už taktéž řekl - že s (pseudo)paralelním zpracováním by byl nejspíš problém a prakticky by to tedy nebylo použielné řešení. My ale hledáme použitelné řešení.Váš poslední návrh, "otočit" to, je naprosto nepoužitelný. Jednak uživatel dojde na stránku a ví že chce velikost třeba 250 mm, to zadá a né že bude "hýbat posuvníkem" a ladit, zda je obrázek dostatečně velký a zda mu tam sedí. Navíc, obrázek je malý a když chce třeba velikost 3 m, tak to nikdy nenastaví správně. Na těch 3 metrech to pak bude dělat rozdíl třeba X cm, což je zcela nepoužitelné.Jak jsem již uvedl, není to triviální věc a je třeba se nad tím zamyslet do hloubky. Hledáme opravdu sofistikované řešení. Poád se mi nejvíce zamlouvá nějaké napojení na grafický program, který sám o sobě spoustu věcí řeší a umí.

Napsal kucera;1264490

a tak musíte neustále vlastní algoritmy upravovat a rozšiřovat ...

To určitě ne, ten princip je stále stejný, mění se pouze tabulka pro daný font. A ano, tu je nutné vyladit, pokud defaultní nevyhovuje. Jít cestou grafických programů si nijak nepomůžete, ani ten Illustrátor neumí nastavit přesný rozměr textu, vždy je to box a velikost + kerning.

Napsal Jan Stejskal;1264496

To určitě ne, ten princip je stále stejný, mění se pouze tabulka pro daný font. A ano, tu je nutné vyladit, pokud defaultní nevyhovuje.

Jít cestou grafických programů si nijak nepomůžete, ani ten Illustrátor neumí nastavit přesný rozměr textu, vždy je to box a velikost + kerning.

Děkuji Vám.Jenomže "boundary box" není jediný problém, narazíte jich na spoustu, různé "přečnívající znaky", kdy se "j" táhne hodně dopředu, atd. atd. Mimochodem, pro zajímavost, např. "O" neleží na lajně ale je o maličko výš - není to "matematicky" správně, ale je to kvůli "oklamání zraku", aby to mozek "viděl přirozeněji". Zabýváme se tím už nějaký rok (ne vkuse samozřejmě) a těch problémů za tu dobu vyplynula celá řada. Pokaždé se něco objeví a je třeba na to reagovat. Potřebovali bychom radu od někoho, kdo s tím má zkušenost, protože jinak přichází spousta nápadů, ale my už po zkušenostech víme, že se objeví spousta problémů, které si člověk "na začátku" vůbec neuvědomí.Jako "nejsnažší" se jeví skrze ImageMagic text vykreslit na bílé pozadí, použít funkci, která ořeže vše bílé až k textu (toto umí), zjistit šířku a matematicky přepočítat velikost fontu. Ale zase, to už je takové "nečisté" řešení, kdy pracujete s ořezem obrázku. A opět, tímto se dá vyřešit (byť přesně) jen "boundary box". Těch problémů je ale více. Nemá smysl vše řešit, hledat ... prostě použít něco kvalitního, co to zvládá.Illustrator to nastavit umí přesně - jak jsem uvedl již v předchozích příspěvcích, řeší se to tak, že se text převede na křivky a teprve poté se nastaví přesná velikost.Kromě grafického programu máme i úvahy na nějaký "text-processing", Latex, apod. Ale to jsem také již zmínil v prvním příspěvku. Možná, že toto by byla lepší cesta. Nevím, proto bych se o tom rád s někým, kdo tomu rozumí poradil.

Napsal kucera;1264501

Illustrator to nastavit umí přesně - jak jsem uvedl již v předchozích příspěvcích, řeší se to tak, že se text převede na křivky a teprve poté se nastaví přesná velikost.

Tedy neumí. Práce s fontem je něco zcela odlišného jako práce s křivkou. A Illustrátor to co požadujete s fontem neumí, tak jako žádný jiný sw, protože z typografického hlediska je to nesmysl. Ale domnívám se, že je možné realizovat stejný postup i na canvas, tedy vytvořit si text, z něj generovat svg a zobrazit v požadované přesné velikosti (již se nebude jednat o text, ale o křivku, tedy odpadá prostor před prvním a za posledním znakem, výšku neřešíte, ta je dána fontem samotným, jinak by se písmo deformovalo).

Napsal Jan Stejskal;1264507

Tedy neumí. Práce s fontem je něco zcela odlišného jako práce s křivkou. A Illustrátor to co požadujete s fontem neumí, tak jako žádný jiný sw, protože z typografického hlediska je to nesmysl. Ale domnívám se, že je možné realizovat stejný postup i na canvas, tedy vytvořit si text, z něj generovat svg a zobrazit v požadované přesné velikosti (již se nebude jednat o text, ale o křivku, tedy odpadá prostor před prvním a za posledním znakem, výšku neřešíte, ta je dána fontem samotným, jinak by se písmo deformovalo).

Pro naše potřeby umí. Já jsem nikde neuvedl, "jak to má fungovat". Jak to řeší "interně" je v tomto případě jedno, nás přeci zajímá výsledek. V zadání jsem jako vstup uvedl text + parametry a jako výstup vygenerovaný obrázek (např. PNG, JPEG + SVG nebo AI, atd.). Nikde jsem neuváděl, zda to má řešit "tak či onak". Tzn. že Illustrator, to co chceme umí. Jestli je mezikrok převod na křivky není vůbec podstatné - nás zajímá výstup a tím je obrázek přesných rozměrů.I když ... možná jsem neuvedl to, že v tom SVG (AI) to nemusí být formou textu, ale klidně křivek ... to je fakt - na tomto nezáleží. Jde to do "tisku" (řezačky") a té je to jedno.---------- Příspěvek doplněn 06.02.2016 v 19:25 ----------U toho canvasu je ještě problém, že je to čistě na straně klienta a na něm závislé, ale kolega tu uváděl, že to jde "vyrenderovat" i na straně serveru? Nevím jak, ale pokud ano, bylo by to jedno.Zeptám se takto, dokázal byste to tedy zrealizovat a měl byste o to případně zájem? Jaká by byla cena za realizaci, viz. mnou uvedený odkaz? Výstupem by byl PNG obrázek + SVG s přesnými rozměry - tak, aby se jen otevřel, dalo "tisk" a řezačka to vyřízla v přesných rozměrech - bez nutnosti jakýchkoliv ručních (do)úprav.Pro případné testy Vám mohu dát k dispozici cca. 100 fontů (včetně kurzívy a bold) - šlo by o fonty, které už používáme v ostrém provozu na našem řešení skrze PHP, GD a Imagick.Osobně preferuji úvahy o napojení na grafický program nebo nějaký "text-processing", Latex, apod. ... nicméně, pokud půjde i tak o dobře funkční řešení, nebráním se ani Vašemu návrhu.

pro jednu českou společnost nabízející výrobu všemožných reklamních předmětů jsme dělali webový návrhář. Na klientu se náhled vykresloval flashem/javascriptem, o přesnost nám tolik nešlo, stejně nebylo možné finální návrh uzavřít přímo v prohlížeči kvůli nekalibrovaným barvám na monitoru a kvůli různé jemnosti pixelů.Poptávku z prohlížeči si převzal grafik, jak náhled, tak i jednotlivé vrstvy a jejich vlastnosti, překreslil si to poloautomaticky v grafickém programu (časově cca 15 - 30 min) a předal obchodníkovi, ten kontaktovat zpátky zákazníka, poslal se nějaký vzorek, výroba atd.Na podobné menší projekty jsme používali qcad, inkscape, libreoffice draw není vůbec špatný, na textury zase krita. Všechny tyhle nástroje lze ovládat přes command line a tedy jednoduše integrovat do aplikací. U posledního projektu, kde generujeme "powerpoint" prezentace používáme html+css a vykreslujeme přes phantomjs.