Potřebovala jsem rychle vytvářet bannery pro sociální sítě. Nechtěla jsem čekat na grafika nebo se učit Canvu. Chtěla jsem něco jednoduchého, kde napíšu text, vyberu barvy a stáhnu hotové vizuály ve více formátech najednou.
Rozhodla jsem se vytvořit si vlastní nástroj. Webovou aplikaci, která se mi otevře v prohlížeči a umožní mi vytvářet konzistentní vizuály bez složitého rozhraní a bez předplatného.
Jak to začalo
Měla jsem předlohu – HTML soubor s bannery v určitém stylu. Chtěla jsem aplikaci, kde se mi zobrazí dvě velikosti bannerů v tomto stylu. V sidebaru budou inputy pro nadpis, text a tlačítko. Text se bude dynamicky měnit v náhledu. A hlavní barva banneru se bude dát měnit – původně oranžová, ale s možností vybrat z několika barevných palet.
Začala jsem jednoduše. HTML struktura, CSS styly, JavaScript logika pro živou změnu textů. Přepínač barev, možnost skrýt tlačítko. Základní export do PNG pomocí knihovny html2canvas.
Kde jsem narazila
První problém přišel hned při exportu. Stažené PNG neobsahovalo text tlačítka. Ukázalo se, že html2canvas má problémy s `gap` ve Flexboxu. Nahradila jsem `gap` za `margin`, přidala jsem `await document.fonts.ready` před exportem a metodu `onclone` pro vynucení viditelnosti textu.
Pořád to nefungovalo. Problém byl komplexnější – html2canvas má značné limity při renderování SVG uvnitř složitých Flexbox kontejnerů. Pro spolehlivý export je nejlepší nahradit dynamické SVG za base64 obrázek nebo jednoduchý textový znak.
Další problém přišel s logem. Po stažení do PNG bylo logo useknuté zespodu. Musela jsem nastavit `display: block`, odstranit `object-fit: contain` a nastavit `overflow: visible` na rodiči.
Co jsem se naučila
Knihovna html2canvas má své limity. Pro manipulaci s DOMem před exportem je často nutné dočasně zjednodušit styly – například nahradit flex za display: table nebo block, aby byl výstup vizuálně shodný s prohlížečem.
Slugify funkce je nezbytná pro generování čistých názvů souborů z uživatelských vstupů. Každý soubor se stahuje s názvem ve formátu: nadpis-radek1-nadpis-radek2-barva-format.png.
Nejvíc mě překvapilo, jak dlouho trvalo vyřešit problémy s exportem. V HTML to vypadalo perfektně, v PNG už ne. Nakonec jsem musela použít base64 obrázky místo SVG a zjednodušit layout pro export.
Výsledek
Banner Creator je teď funkční aplikace, která mi umožňuje:
- Vytvářet bannery ve více formátech najednou – Story, Post, LinkedIn Cover, OG Image
- Vybírat z různých barevných motivů – veselé barvy, gradienty, Aibility Aurora pozadí
- Vidět změny okamžitě při psaní – live preview
- Stahovat všechny formáty jedním kliknutím – hromadný export
- Vybrat mezi tagem/kategorií nebo logem Aibility
Žádné složité rozhraní, žádné předplatné. Prostě otevřu aplikaci, napíšu text, vyberu barvy a stáhnu hotové vizuály.
Proč to stojí za to
Když potřebujete něco specifického, můžete si to postavit. Nemusíte být programátor. Stačí vědět, co chcete, a mít nástroj, který vám pomůže to vytvořit.
Banner Creator mi šetří čas a peníze. Nemusím čekat na grafika nebo platit za Canvu Pro. Mám vlastní nástroj, který dělá přesně to, co potřebuji, a nic víc.
Pokud potřebujete něco podobného, zkuste to. Možná zjistíte, že je to jednodušší, než jste si mysleli.