Diskuze: Import loga do fotky

JavaScript JavaScript Import loga do fotky

Avatar
katrincsak
Člen
Avatar
katrincsak:

Zdravím,

potřeboval bych pomoct s vložením loga do fotky na straně klienta (zda-li) je to možné.

Použil jsem toto: https://github.com/…-File-Upload
Ukázka : https://blueimp.github.io/…File-Upload/

Celé jsem si to přizpůsobil a osekal pro své potřeby a zatím to dělá vše co potřebuji, ale abych dosáhl maximální rychlosti oproti práci na serveru (php) tak bych rád vložil logo už na straně klientovi.

  1. Je to vůbec možné ?
  2. Jak bych to mohl implementovat pro již vytvořený kod?

JavaScript víceméně neumím, ale php ovládám na dobré úrovni ale nějak si s tímto nemůžu poradit.

děkuji za rady.

Editováno 4.10.2015 12:18
 
Odpovědět 4.10.2015 12:16
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na katrincsak
Taskkill:

Takže ti vlastně jde i to, že máš obrázek na webu a ty chceš do nějaké oblasti tohoto obrázku vložit další obrázek, který si nahraje sám uživatel? A chceš to udělat aniž bys musel obrázek nahrát na server předtím, než ho umístíš na stránku? No jde to, mě teď napadá třeba tohle schéma: Uživatel nahraje soubor do webu tím pluginem co používáš, javascriptem si ten JPEG přeložíš na base64(formát dat), pak vytvoříš element IMG do atributu src="" mu vložíš ten zdroják toho JPEGu v base64 a ten element (ten obrázek) vložíš do stránky. Potom (nebo souřadně s tím) musíš ten obrázek nahrát na server, na serveru zpracovat tu informaci, aby po refreshnutí stránky zůstal uživatelův obrázek tam kde má být, tentokrát se už bude stahovat a linkovat ze serveru.

Moje otázka je: Vážně to takhle chceš dělat? Možná, když to dobře napíšeš v JS tak to bude svižné, ale není to trochu zbytečné, vždyť ten obrázek je docela malá "fajla" to nahraješ hned, navíc, stačí pak od serveru obdržet informaci o adrese na ten obrázek (nebo pokud programuješ i server tak si napíšeš funkci v js, která bude generovat adresy stejným principem jako na serveru, takže vlastně js bude vědět, kde je ten obrázek uložený sám od sebe) a pomocí js ho do té stránky prostě vložit jako element IMG.

Je to rozumnější, protože by ses měl řídit přístupem, čím méně kouzlení, tím méně chytání jednorožců :D (ti se špatně chytaj, asi stejně špatně jako chyby a nekompatibilita napříč prohlížeči). Jestli tě ale zajímá to moje schéma víc, nebo to tak prostě z nějakého důvodu chceš udělat abasta - napiš mi, klidně ti to pomůžu spíchnout.

 
Nahoru Odpovědět  +1 4.10.2015 13:35
Avatar
katrincsak
Člen
Avatar
Odpovídá na Taskkill
katrincsak:

Nejsem si jistý zda-li jsem správně pochopil tvojí odpověď.

Aktuálně.

  1. PHP: Script 100% moje práce. Zkontroluje, zmenší fotku a vloží logo bazaru do pravého rohu.

(Samozřejmě nevýhoda, že se vše musí nahrát a pak upravit. Jednak to brzdí server, ale i uživatele když má nízký upload a může aplaudovat již upravenou fotku.

  1. JS ... V podstatě mi už dělá úplně to samé, ale rád bych jen vložil logo serveru... Samozřejmě jestli je to zbytečně složité a je lepší vložit potisk/logo na fotku až na straně serveru, tak s tím nemám problém. Dám na doporučení, jen mě napadlo proč to rovnou nedělat na straně klienta.
 
Nahoru Odpovědět 4.10.2015 13:43
Avatar
BlugW
Redaktor
Avatar
Odpovídá na katrincsak
BlugW:

Myslím že lepší to je, jelikož JS se dá vždy vypnout.
(Ano kdo by si ho vypínal, ale i tak je možnost že ho někdo vypne)

Nahoru Odpovědět  -1 4.10.2015 13:47
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
katrincsak
Člen
Avatar
katrincsak:

Technicky to funguje stejně jako toto: https://blueimp.github.io/…File-Upload/

Jenom by bylo fajn, kdyby se už rovnou vložilo logo.. Takže vlastně když vyberu fotku, dojde rovnou ke zmenšení a ve stejný moment bych chtěl i importovat logo do té fotky. Samozřejmě jestli je to možné až po nahráti fotky, tak to nemá smysl samozřejmě takto řešit, ale to je to co nevím :D

 
Nahoru Odpovědět 4.10.2015 13:47
Avatar
katrincsak
Člen
Avatar
Odpovídá na BlugW
katrincsak:

To je v pohodě, když to někdo vypne, tak upload v JS je samozřejmě nefunkční a bude mít možnost to přepnout na starší verzi se značným omezením :-)

To znamená, že použiji svojí aktuální verzi v PHP kterou jsem psal původně.

Editováno 4.10.2015 13:49
 
Nahoru Odpovědět 4.10.2015 13:48
Avatar
BlugW
Redaktor
Avatar
Odpovídá na katrincsak
BlugW:

Aha tak to je pak ok, no já jsem s tím taky nějak zápasil jelikož JS není moje.
A nakonec jsem to vyřešil pomoci php :)

Editováno 4.10.2015 13:53
Nahoru Odpovědět 4.10.2015 13:52
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
katrincsak
Člen
Avatar
Odpovídá na BlugW
katrincsak:

Taky to tak na konec vidím :D google odkazy již proklikané a vidím to tak, že ten mi už nepomůže :D

 
Nahoru Odpovědět 4.10.2015 13:59
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na katrincsak
Taskkill:

Aha, já jsem to pochopil přesně naopak -> ve smyslu, že bys nahrál do velké statické fotky jednu menší, jako třeba badge do profilovky nebo tak. Pokud to ale máš takhle, tak to je jiná. Teoreticky bys potřeboval nějakou kvalitní knihovnu na práci s obrázkama...určitě něco musí existovat co by dokázalo tu fotku od uživatele zkotrolovat, oříznout, do rohu hodit nějaké logo portálu, pokud vážně trváš na tom JS tak se vydej tímhle směrem, nicméně udržovat dvě verze (jednu pro JS zapnutý a druhou pro JS vypnutý) bude zbytečná dřina, spíš to nech na tom serveru. (To ti necpu, jen je to můj názor.)

 
Nahoru Odpovědět 4.10.2015 14:00
Avatar
katrincsak
Člen
Avatar
Odpovídá na Taskkill
katrincsak:

Potisk/logo asi tedy nahraji na straně serveru, protože se mi nic pořádně nepodařilo najít a je pravda že i v PHP mi to dalo trochu práci. Pakliže by to byla knihovna asi bych potřeboval i pěkný návod a angličtinu nemám úplně dobrou, ale něčemu porozumím.

Ale asi to tedy vidím tak, že:

  1. Úprava velikosti/kontrolka (JS -> Klient)
  2. Kontrola + nahrátí potisku (PHP -> server)

Jen ještě zvážím zda dělat verzi pro JS a bez JS .. Kdyby neměl JS, tak bych mu dla informaci, že nelze.. Ale pár neaktivních řádku, které se aktivují v případě potřeby budou neškodné..

Každopádně děkuji moc za dořešení mého problému a řešení mám tedy jasné.

Jen nevím komu to řešení mám dát ;-)

 
Nahoru Odpovědět 4.10.2015 14:18
Avatar
katrincsak
Člen
Avatar
katrincsak:

Respektive verze bez JS je už teď, ale budu ji muset upravit pro menší kapacity.

 
Nahoru Odpovědět 4.10.2015 14:23
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na katrincsak
Taskkill:

Tak výborně ... ps: řešení nemusíš dávat nikomu. ;)

 
Nahoru Odpovědět  +1 4.10.2015 14:46
Avatar
katrincsak
Člen
Avatar
Odpovídá na Taskkill
katrincsak:

Tak mám problém, nedaří se mi vůbec do toho zakomponovat inputy, aby došlo k odeslání. Zpracuje se js a pak PHP které je k tomu přidělené. Popravdě řečeno to PHP je na dost vysoké úrovni a některým věcem vůbec nerozumím.

Vůbec nechápu podle čeho to PHP identifikuje data. Rád bych k tomu klidně napojil svoje i kdybych to měl celé předělat, ale nějak zaboha se mi to nedaří spojit.

Zkoušel jsem vložit v JS -> XHR, které mi vlastně vyvolalo POST a tím jsem se dostal do kontroleru, ale pak už nefungoval ten zbytek i když jsem si vytvořil vlastní tlačítko v JS...

Stále se jedná o stejný kod jako je v nadpisu/popisu..

 
Nahoru Odpovědět 5.10.2015 9:28
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na katrincsak
Taskkill:

Ahoj,
po pravdě jsem z toho popisu problému trochu zmatený... Říkáš že js se provede, takže chápu to tak, že serveru se data pošlou? Takže to selže na serveru? Jestli je chyba v PHP tak ti vůbec nepomůžu, protože PHP není vůbec můj obor. Možná Misaz by mohl.

 
Nahoru Odpovědět 5.10.2015 10:21
Avatar
katrincsak
Člen
Avatar
Odpovídá na Taskkill
katrincsak:

To mi asi neporadíš noo.
Ono to všechno funguje, tak jak to je. Když se budeme bavit o nahráti fotek. Problém je v tom, že netuším jak mám odpojit původní PHP a napojit svoje. Neznám identifikátor, JS blokuje odeslání a ať zkouším co zkouším za boha mi to nejde.

Samozřejmě potřebuji vyplnit údaje formuláře a po kliknutí na odeslat, aby se vše nahrálo včetně dat z inputu. Původní PHP se mi nedaří nějak modifikovat, protože je tam spousta postupů, které vůbec neznám i když je to v OOP.

 
Nahoru Odpovědět 5.10.2015 10:58
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na katrincsak
Taskkill:

Zkoušel jsi hledat ten plugin někde v diskuzích ? Občas, pokud jde o oblíbený projekt, o něm mluví lidé i na githubu v komentářích... No leda že bys dotaz položil do PHP sekce konkrétně na to co potrebuješ... Odpojit PHP projektu a připojit svoje...

PS: do zdrojáku jsem na to koukal, je to krásnej kus kódu, ale bohužel ti neřeknu nic platného. Mohl by Michal Žůrek (misaz)

 
Nahoru Odpovědět 5.10.2015 11:11
Avatar
katrincsak
Člen
Avatar
Odpovídá na Taskkill
katrincsak:

Hodil jsem dotaz a trochu jiný do PHP skupiny: http://www.itnetwork.cz/…612415ca35c8

Zkoušel jsem hledat, ale zatím jsem nic nenašel co by mi pomohlo. Podle mě se jedná o nějaké klasické propojení js/php ale škoda že to nemohu vynutit tím XHR v JS.

Uvidíme, každopádně ti děkuji moc za rady, za doporučení a snad si toho všimne a třeba odepíše.
Snad se něco vymyslí v PHP skupině.

 
Nahoru Odpovědět  +1 5.10.2015 11:48
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.

Zobrazeno 17 zpráv z 17.