Zmenšení obrázků javascriptem před uploadem na server

forum · **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>

A. Chyský · **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.

forum · **Registrován:** 14 srp 2019 10:54 **Příspěvky:** 7

Děkuji za nasměrování, M

Návody pro C4

Webhosting C4

Zmenšení obrázků javascriptem před uploadem na server

Kdo je online

FTP Uploader

Tvorba web stránek Hosting