V tomto machrovi bude vaším úkolem vytvořit jednoduchou webovou aplikaci
pro úpravu obrázků. K ní samozřejmě vytvoříte stránku s nějakým
pěkným formulářem pro odesílání obrázků k úpravě.
Aplikace musí povinně umět efekty: sépiové zbarvení, odstíny
šedé, zesvětlení / ztmavení o zadanou hodnotu, převrácení stran,
otočení o 90°, 180° a 270°
Další efekty (např. rozmazání) budou za plusové body.
Pro jakékoli dotazy je dost místa v komentářích.
Čas si dáme do neděle 12.4.2015 do 12:00. Vyhodnocení bude (snad) téhož
dne večer.
Aby to nebylo tak jednoduché. Myslím si, že ten obrázek můžeš nejprve
proklikáváním předělat pomocí JS (bude vidět, jak vypadá fináln) a až
po odeslání to udělat ještě PHP a dát možnost ho stáhnout.
Tedy s obrázky jsem naposledy pracoval několik let zpátky a nevím, jestli
jsou ty funkce zastaralé, ale mno. Každopádně něco jsem napsal, chtěl jsem se konečně taky
zůčastnit nějakého Machra. http://leteckaposta.cz/515278883
To sice je, ale v opravdovém projektu. Když se učíš funkce v PHP,
nebudeš přece přemýšlet nad tím, jestli to udělat v JS. Je dobré tyhle
funkce znát. Jestli je použiješ v reálné praxi je už věc druhá.
Chcem sa spýtať, toto zadanie, sa celé vytvorí čisto v php kóde? Iba
PHP, alebo k tomu použijete napríklad obrázky, html a podobne..,.. ďakujem
za odpoveď.
vidím, že to tu asi riešite, lebo viem kresliť cez php, ale urobiť
tlačítko v graficky bezchybnom odtieni šedej,.... ahaaaahhaahahahahahaha ,
ved ja neviem kresliť rukou.... . Idem čítať, každopádne ďakujem za vašu námahu nás niečo
naučiť.
Machr by měl docílit abyste se naučili něco zajímavého na něčem co se
v praxi dá nějak zužitkovat. Proto se ofrňuju, ale lepší než nic, pokud
se na tom někdo něco naučí. Já to tedy vyřeším (i kdyby mimo soutěž) v
JavaScriptu.
Bude vadit, když místo zesvětlení a ztamevní tam bude jas (záporná
nebo kladná hodnota) a místo otočení o přesně zadanou hodnotu si uživatel
bude moct zadat úhel otočení?
Tak propojení s JS by bylo ideální. Třeba pokud by formulář uměl
frontu filterů. Čili uživatel by si mohl zvolit pořadí aplikace filtrů a
vytvořil si tak seznam, který se přes formulář odešle na server.
Dále třeba při použití maticových filtrů by se mohla dynamicky objevit
tabulka pro zadání hodnot.
pustil jsem se do toho zdrojový kód má celkem 889 řádků (TS: 577, HTML:
25, CSS: 287) a jediné co to zatím umí je načíst obrázek Snad to stihnu dokončit.
Ahoj!
tak se tedy hlásím s mým celkem velkým editorem fotografií/obrázků.
Umí všechny potřebné funkce, které jsou v zadání je skvělé
objektový a je připraven na další rozšíření. Všechny stěžejní funkce
jsou již hotové.
Umí
vytvořit nové bílé plátno
otevřít obrázek z lokálního počítače
otevřít obrázek z URL (pokud server posílá hlavičku, která to
JavaScriptu umožní)
exportovat obrázek v PNG
exportovat obrázek v JPEG
vrátit předchozí provedenou akci
zrušit vrácení provedené akce
zobrazit kompletní historii změn v obrázku
porovnávat rozdíly před a po použití funkce
vrátit se do libovolného bodu v historii změn
převést obrázek do sépie
převést obrázek do stupňů šedi
nastavit jas obrázku
překlopit obrázek vodorovně
překlopit obrázek svisle
otočit obrázek o 90°
otočit obrázek o 180°
otočit obrázek o 270°
otočit obrázek o -90°
otočit obrázek o -180°
otočit obrázek o -270°
pamatuje si seznam naposledy uložených obrázků
naposledy uložené obrázky zobrazuje na vítací obrazovce
umožňuje editovat v jedné záložce prohlížeče více obrázku najednou
díky panelu otevřených záložek
umí pracovat a přepínat se do full screen režimu
nástroje jas a historie otevírá v plovoucích oknech, díky tomu lze
efektivněji využívat (hlavně nástroj historie) na více obrazovkových
monitorech
umí uložit v komprimované složce (metoda ZIP) všechny obrázky ze
všech otevřených záložek
plně podporován a testován v Internet Explorerem 10
plně podporován a testován v Chrome 40
plně podporován a testován v Mozilla Firefox 35
částečně podporován v Project Spartan (zhruba 60% podpora)
částečně podporován v Opera 12.17 (zhruba 90% podpora)
Implementace
aplikaci lze samozřejmě otevřít otevřením souboru index.html v
prohlížeči (kdo by to čekal, že). jenže... nástroje jas a historie
nebudou dostupné, protože pro jejich běh je z bezpečnostních důvodů
(které jsem si nevymyslel já) běh aplikace na serveru. Můžete proto si
aplikaci buď rozhodit na localhostu nebo rovnou spustit z http://misaz.moxo.cz/mphotobeta
Bugy
Ano aplikace je větší, tak i ačkoliv prošla důkladným testováním
jistojistě bude obsahovat nějaké bugy, můžete je samozřejmě hlásit.
Prozatím vím, jen o tom, že můj oblíbený Google Chrome vyhodí ptáky při
exportu většího obrázku nebo ZIPu. Internet Explorer v záchvatu volání
Windows API při větším obrázku naopak (ne však vždy) spadne s chybou
"Datová oblast předaná systémové službě je příliš malá.". Firefox se
na to pro změnu občas vykašle (bez vypsání chyby), ale většinou to
funguje ve všech prohlížečích (až na Spartana tedy) dobře.
Bug #0001 (Plátno se při provádění náhledů funkcí nevyčistí)
vyřešen. Okazy zůstávají stejné. Cache vyčistíte buďto Ctrl + F5 nebo
Strl + R nebo prostě přidržíte F5. Seznam naposledy editovaných obrázků
by měl být v rámci domény zachován.
Umí filtry a efekty, které jsou v zadání, nějaké to rozmazání a také
změnu rozlišení. je to čisté PHPko, žádné JS vychytávky tam nehledejte.
Ve skupině Image, můžete změnit požadované min. a max. hodnoty pro
výšku či šířku nebo cestu kam chcete obrázky ukládat.
Použití: Začněte nejprve s nahráním obrazku/ů, je přítomná podpora
hromadného uložení.
Po nahrátí se vám hned ukáže výpis přítomných/nahraných obrázků,
můžete je buď upravit nebo smazat.
Složky kam se nahrávají obrázky a keše se vytvoří samy.
Při úpravě máte možnost začít znovu, pokud se výsledek nebude líbit.
Jakmile budete s výsledkem spokojeni můžete přijmout úpravu, čímž
aktualizujete originální obrázek upraveným.
Tak přidávám aktualizovaný výtvor http://machr.phpreport.cz/
Umí teda pracovat pouze s jedním obrázkem, který nahrajete na uvodní
stránce a potom Vás to přesměruje k editoru. Je to vše psané podle
zdejších tutorialů. Jen previewController mam trošku divočejši.
Ach ten čas... Tady máte konečně to hodnocení: Neaktivní uživatel :
To co jsi odevzdal špatné není, ale jaksi jsi tam zapomněl dát editor,
úpravy jsou pouze v kódu a nedají se používat.
Uživatel sítě :
Editor vypadá celkem pěkně, jen u úprav chybí odkaz zpět na úvodní
stránku. A u změny velikosti by se mohly předvyplnit původní rozměry.
Změna kontrastu ti nefunguje, místo kontrastu to mění jas. Kód vypadá
velmi dobře.
pivovary :
Když jsem to zkusil spustit vypsalo to chybu (chyběl ti tam středník):
Parse error: syntax error, unexpected 'function' (T_FUNCTION) in C:\xampp\htdocs\machr\editor_image_pivovary\config\config.php on line 3
Po opravě této chyby mě to přesměrovává na stránku /error404. Co se
týče kódu, tohle úplně nechápu:
Dominik Klapuch :
Mohl jsi se alespoň trochu pokusit nastylovat ten formulář, ale to tady není
podstatné. Připadá mi trochu zbytečné dělat extra třídu pro každý
efekt (hlavně když má jen jednu metodu), vzniká tím obrovské množství
souborů o pár řádkách.
foreach ($_POST['options'] as$o) {
switch($o) {
case'toGrayScale':
$img->toGrayScale();
break;
case'changeBrightness':
$img->changeBrightness($_POST['changeBrightnessValue']);
break;
// a tak dále
}
}
by asi bylo lepší napsat jako podmínky. Tohle by se hodilo, kdybys měl
frontu efektů - uživatel by mohl ovlivnit pořadí provedení úprav, ale tady
nic takového nemáš. Jinak to není špatné.
Ondrca :
Bylo by fajn přidat historii upravených obrázků, nebo použití více
efektů na jeden obrázek. Takhle musím po úpravě obrázek stáhnout a znovu
nahrát abych mohl dál upravovat. Kontrast ti funguje převráceně - vyšší
číslo znamená nižší kontrast, což je trochu zvláštní. Kód je na tom
celkem dobře.
Škoda že nikdo nevytvořil frontu s úpravami, jak psal 1Pupik1989 .
Ale ta v zadání nebyla. Placku vyhrává Uživatel sítě . Výtvor tedy
publikuj a o placku si napiš do PM.
A teď extra hodnocení Machr na TypeScript - Úprava
obrázků
Michal Žůrek - misaz :
Krásný objektový kód, skvěle fungující editor... Co dodat. Snad jen že
placku si určitě zasloužíš, do PM mi napiš jakou chceš.
Díky, odkaz jsem dal pouze do hlavičky(v h1 a h2), nenapadlo mě kam ho
jinam dát, ale místo by se jistě našlo. Změna kontrastu nefunguje, jelikož
je tam stejný filtr jako na změnu jas IMG_FILTER_BRIGHTNESS
a má být IMG_FILTER_CONTRAST(V publikované verzi to bude
opravené).
Ahoj, co se ti nezdá na mém počtu souborů? Každá třída vykonává
přesně jen jednu věc - v tomto případě efekt. V případě, že by si
někdo chtěl napsat vlastní kód na daný filtr, kód by mohl být mnohem
delší. Jedna metoda se mi nezdá špatná, rozhraní by mělo být co
nejtenčí. Kdybych to vše dal do jednoho souboru, mohlo by nastat to, že bych
měl třídu o 2000 řádkách. Na tuto třídu by bylo pak těžké vytvořit
rozhraní, které by se neměnilo. Myslím si, že ve všech projektech, ve
který se splňují SOLID principy je větší množství souborů. Pokud se
pletu, vyvrať mi to, prosím.
config.php zazipoval asi dřív než jsem ho odzkoušel. Proč se to
přesměrovává na error404 zkusím zjisit jak stáhnu xampp ale myslím že by
to mohl dělat .htaccess. Jelikož při psaní kódu používám takový styl
že si to kopíruju hned na produkci tam mi to jede bez problémů.
A k těm constantám je to psané dle zdejších tutoriálů od David Čápka Hartinger,
dle mně je to spíše k lepší práci s něma přímo v té třídě abych je
nemusel v kódu převádět na konstanty, protože jako string se s nima nedá
pracovat
OT: jak už tu bylo mnohokráte zmíněno obrázky lze velice snadno
upravovat pomocí JS sám se učím tento framework http://fabricjs.com/image-filters/ ... píši to jen pro
doplnění, kdyby si někdo chtěl upravovat.
Btw: jestli někdo pracuje s tímto frameworkem nebo by měl zájem o něm
pokecat, pošlete mi zprávu do pošty
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.