Moderní tvorba webových aplikací

O webu

Převody souborů a dat přímo v prohlížeči

Jak převádět obrázky, textové formáty v prohlížeči pomocí JavaScriptu – bez odesílání dat na server.

8 minut

Ve webových prohlížečích je možné čím dál tím víc.

Jednou z věcí je převod různých formátů souborů mezi sebou. Převádět běžné formáty lze dnes pohodlně i offline a bez odesílání dat na server.

Pro uživatele může být dobré, že nemusí nic odesílat na server, protože si tak může převést různé formáty, aniž by do nich mohl mít provozovatel přístup.

Pro provozovatele webu to naopak znamená minimální zátěž, protože se výpočty provedou na HW návštěvníka.

Co jde čistě v prohlížeči

Teoreticky jde převést skoro cokoliv. JS může číst data, převést je a nabídnout ke stažení.

Hlavním limitem je tak výkon, který je navíc závislý na zařízení. Na stránku mohou přistupovat uživatelé s pomalými levnými mobily a zároveň z výkonných počítačů.

Velké soubory mohou být pomalé a náročné na paměť.

Proto se často různé konverse provádějí na straně serveru i v případě, že by to šlo obsloužit u klienta.

Zvlášť náročné věci (třeba generování stovek faktur) se ideálně provádějí asynchronně.

V praxi se může používat i hybridní řešení, kdy se část operací provede u klienta a část na serveru. Třeba rychlé operace snižující zátěž na síťový přenos se provedou v JS u klienta, ale náročné operace se už zpracují na serveru.

Vždy je důležité také myslet na to, že klientské straně se nedá věřit. Proto je například spolehlivé přidání vodoznaku do obrázku v každém případě nutné dělat na serveru.

Zjednodušeně řečeno:

  • Texty a data: třeba převody CSV ↔ JSON budou dost bezproblémové u menších souborů.
  • Obrázky (PNG/JPEG/WebP/SVG) – jde využít kreslení do <canvas>u – obecně platí, že cokoliv se může na webu zobrazovat, není problém nakreslit do <canvas>u a ten jednoduše uložit jako libovolný obrázkový formát nebo třeba i PDF.
  • Audio/video, Office, ZIP, PDF apod. – dost často existuje JS knihovna, která konversi dokáže provést.

Obrázky: PNG/JPEG/WebP a změna velikosti

Pro převod do PNG (nebo jiných formátů) z SVG jsem si vytvořil jednoduchý nástroj:

Přehled konversí a knihoven

Skoro pro každou myslitelnou konversi souborů existuje JS knihovna, která ji aspoň nějak dokáže obsloužit.

Máte zkušenost s nějakým dalším nástrojem na zajímavé převody formátů souborů? Dejte mi prosím vědět do komentářů.

Související články

Zvláštní znaky na české klávesnici

Jak na běžné české klávesnici pohodlně programovat a zapisovat všelijaké speciální znaky?

10 minut

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

12 minut

Pravidlo dvou

Jak používat pravidlo dvou pro efektivní psaní dobrého kódu

3 minuty

CMS založené na Gitu

K čemu jsou dobré redakční systémy postavené na Gitu.

10 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025