Bildgenerator med textoverlay

Vad du bygger

En liten server-funktion som tar en illustration + rubrik, lägger på färgat fält och text, och sparar en publik URL i social_post_media.

Innan du börjar

• En bunt basbilder att bygga vidare på (illustrations-biblioteket räcker)
• Bekantskap med Node buffer/canvas eller Remotion

Steg för steg

1. Välj mall (t.ex. "Redaktionell asymmetri" — grönt fält 40% bredd)
2. Skriv en overlay-caption-funktion som tar bild-URL + rubrik + underrubrik
3. Använd sharp eller @napi-rs/canvas för att komponera
4. Kolla bakgrundens luminans så texten alltid får kontrast
5. Ladda upp resultatet till Supabase Storage och returnera publik URL

Tips

• Kör alltid en luminanscheck innan du placerar text — annars försvinner den i mörka partier
• Cachea genererade bilder per (bild+rubrik)-hash så du inte betalar dubbelt

Vanliga fel

• Att glömma unicode-typsnitt så å/ä/ö blir tofu
• Att skriva över originalbilden i storage — spara alltid overlay som ny fil