Právě je 29 zář 2020 19:11

Všechny časy jsou v UTC + 1 hodina [ Letní čas ]




Odeslat nové téma Odpovědět na téma  [ Příspěvků: 3 ] 
Autor Zpráva
 Předmět příspěvku: Zmenšení obrázků javascriptem před uploadem na server
PříspěvekNapsal: 08 bře 2020 23:02 
C4 zákazník

Registrován:
14 srp 2019 10:54
Příspěvky:
7
Dobrý večer,
ještě neovládám javascript, a tak bych Vás chtěl poprosit, jestli někdo nemáte javascript, který by zmenšil obrázky ve formuláři, aby se na server uploadovali již zmenšeniny. Obrázků by ve formuláři mělo být minimálně 3 a maximálně 30, ve formátu .jpg. Dále pokud je obrázek "na široko" měl by mít maximální šířku 1000px, pokud je obrázek "na výšku" měl by mít maximální výšku 1000px.

Předem Vám moc děkuji za pomoc.

Kód:
<FORM id="form-pro-upload" name="form-pro-upload" action="https://www.nejakyserver.cz/vlozeni-inzeratu/vlozeni-inzeratu.php?akce=1" method="post" accept-charset="UTF-8" enctype="multipart/form-data">

<table style="width:100%;">
<tr style="width:100%;">
<td style="width:33%;">&nbsp;&nbsp;1. foto <INPUT name="soubor1" type="file" accept="image/jpeg"></td>
<td style="width:33%;">&nbsp;&nbsp;2. foto <INPUT name="soubor2" type="file" accept="image/jpeg"></td>
<td style="width:34%;">&nbsp;&nbsp;3. foto <INPUT name="soubor3" type="file" accept="image/jpeg"></td>
</tr>
<tr style="width:100%;">
<td style="width:33%;">&nbsp;&nbsp;4. foto <INPUT name="soubor4" type="file" accept="image/jpeg"></td>
<td style="width:33%;">&nbsp;&nbsp;5. foto <INPUT name="soubor5" type="file" accept="image/jpeg"></td>
<td style="width:34%;">&nbsp;&nbsp;6. foto <INPUT name="soubor6" type="file" accept="image/jpeg"></td>
</tr>
<tr style="width:100%;">
<td style="width:33%;">&nbsp;&nbsp;7. foto <INPUT name="soubor7" type="file" accept="image/jpeg"></td>
<td style="width:33%;">&nbsp;&nbsp;8. foto <INPUT name="soubor8" type="file" accept="image/jpeg"></td>
<td style="width:34%;">&nbsp;&nbsp;9. foto <INPUT name="soubor9" type="file" accept="image/jpeg"></td>
</tr>
<tr style="width:100%;">
<td style="width:33%;">10. foto <INPUT name="soubor10" type="file" accept="image/jpeg"></td>
<td style="width:33%;">11. foto <INPUT name="soubor11" type="file" accept="image/jpeg"></td>
<td style="width:34%;">12. foto <INPUT name="soubor12" type="file" accept="image/jpeg"></td>
</tr>
<tr style="width:100%;">
<td style="width:33%;">13. foto <INPUT name="soubor13" type="file" accept="image/jpeg"></td>
<td style="width:33%;">14. foto <INPUT name="soubor14" type="file" accept="image/jpeg"></td>
<td style="width:34%;">15. foto <INPUT name="soubor15" type="file" accept="image/jpeg"></td>
</tr>
<tr style="width:100%;">
<td style="width:33%;">16. foto <INPUT name="soubor16" type="file" accept="image/jpeg"></td>
<td style="width:33%;">17. foto <INPUT name="soubor17" type="file" accept="image/jpeg"></td>
<td style="width:34%;">18. foto <INPUT name="soubor18" type="file" accept="image/jpeg"></td>
</tr>
<tr style="width:100%;">
<td style="width:33%;">19. foto <INPUT name="soubor19" type="file" accept="image/jpeg"></td>
<td style="width:33%;">20. foto <INPUT name="soubor20" type="file" accept="image/jpeg"></td>
<td style="width:34%;">21. foto <INPUT name="soubor21" type="file" accept="image/jpeg"></td>
</tr>
<tr style="width:100%;">
<td style="width:33%;">22. foto <INPUT name="soubor22" type="file" accept="image/jpeg"></td>
<td style="width:33%;">23. foto <INPUT name="soubor23" type="file" accept="image/jpeg"></td>
<td style="width:34%;">24. foto <INPUT name="soubor24" type="file" accept="image/jpeg"></td>
</tr>
<tr style="width:100%;">
<td style="width:33%;">25. foto <INPUT name="soubor25" type="file" accept="image/jpeg"></td>
<td style="width:33%;">26. foto <INPUT name="soubor26" type="file" accept="image/jpeg"></td>
<td style="width:34%;">27. foto <INPUT name="soubor27" type="file" accept="image/jpeg"></td>
</tr>
<tr style="width:100%;">
<td style="width:33%;">28. foto <INPUT name="soubor28" type="file" accept="image/jpeg"></td>
<td style="width:33%;">29. foto <INPUT name="soubor29" type="file" accept="image/jpeg"></td>
<td style="width:34%;">30. foto <INPUT name="soubor30" type="file" accept="image/jpeg"></td>
</tr>
</table>

<br />

<INPUT type="hidden" id="odeslano" name="odeslano" value="ano">
<INPUT type="submit" name="akce" value="Nahrát inzerát na server!">
</FORM>


Nahoru
 Profil  
 
 Předmět příspěvku: Re: Zmenšení obrázků javascriptem před uploadem na server
PříspěvekNapsal: 11 bře 2020 13:02 
C4 podpora
C4 podpora

Registrován:
01 črc 2009 12:23
Příspěvky:
44
Dobrý den,

o žádné knihovně, která by se dokázala takto přímo napojit na formulář, bohužel nevím. Problém je to javascriptem řešitelný, ale budete do něj muset trochu proniknout. Našel jsem několik knihoven, které by Vám mohly pomoci, případně poskytnout inspiraci, protože dělají podobnou věc:

https://www.dropzonejs.com/
https://github.com/nodeca/pica
https://pqina.nl/filepond/
https://xkeshi.github.io/image-compressor/

Problémem zmenšování obrázků v prohlížeči se zabývá tento článek v angličtině.

Princip skriptu, který potřebujete, bude takový, že každé souborové pole bude mít nastavenou onchange událost (JS funkce, která se automaticky volá při změně hodnoty pole). Ta obrázek načte a vloží do tzv. canvasu (HTML tag <canvas>). JS může s obrázkem v canvasu dělat různé úpravy, včetně změny velikosti. Takže po vložení do canvasu obrázek zmenšíte a následně si načtete jeho data do JS. Důležité je, že odeslání formuláře musí nakonec provést JS s daty zmenšených obrázků. Formulářová souborová pole v tuto chvíli již ignorujete - byla tam pouze pro onu onchange událost. JS musí odeslat načtená data z canvasu. K tomu v JS využijete objekty FormData a XMLHttpRequest, více se o tom dočtete zde na MDN.

Ačkoli Váš cíl není úplně triviální, věřím, že to zvládnete. Řešení podobných reálných problémů je nejlepší způsob, jak se jazyk naučit.

_________________
Adam Chyský
Webhosting C4
http://www.c4.cz/


Nahoru
 Profil  
 
 Předmět příspěvku: Re: Zmenšení obrázků javascriptem před uploadem na server
PříspěvekNapsal: 11 bře 2020 23:40 
C4 zákazník

Registrován:
14 srp 2019 10:54
Příspěvky:
7
Děkuji za nasměrování, M


Nahoru
 Profil  
 
Zobrazit příspěvky za předchozí:  Seřadit podle  
Odeslat nové téma Odpovědět na téma  [ Příspěvků: 3 ] 

Všechny časy jsou v UTC + 1 hodina [ Letní čas ]


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 4 návštevníků


Nemůžete zakládat nová témata v tomto fóru
Nemůžete odpovídat v tomto fóru
Nemůžete upravovat své příspěvky v tomto fóru
Nemůžete mazat své příspěvky v tomto fóru
Nemůžete přikládat soubory v tomto fóru

Hledat:
Přejít na:  
FTP Uploader
Staňte se naším zákazníkem!
Hledáme kolegy
Tvorba web stránek Hosting
Návody pro C4

© 2009-2020 ČESKÝ WEBHOSTING s.r.o. Kontaktní e-mail: forum@c4.cz
Diskuzní fórum využívá technologie: phpBB, phpBB-SEO.com, phpBB.cz