IMAGE

HTML til billede: en udviklerguide (2026)

Sådan konverterer du HTML, CSS og DOM-noder til PNG/JPG-billeder. Brugsområder, biblioteker, browser-API'er, OG-billedgenerering, vandmærker og hvordan du gør det uden at uploade kode til en server.

DuneTools · · 10 min read

At konvertere HTML til et billede, tage vilkårlig markup og rendere det som en statisk PNG eller JPG, er en af de operationer, der lyder enkle og viser sig at være overraskende nuancerede. Webskrifttyper, CORS, dynamisk indhold, moderne CSS-funktioner, gennemsigtige baggrunde, retina-rendering… hver tilføjer en ny rynke.

Denne guide dækker, hvad du skal vide i 2026 for at vælge den rigtige tilgang til dit brugsområde: fra engangs-skærmbilleder til dynamisk Open Graph-billedgenerering i skala.

Brugsområder, hvornår du har brug for HTML til billede

1. Dynamiske Open Graph-billeder

Hvert blogindlæg, produktside eller brugerprofil får et unikt socialt kort. I stedet for at håndtegne hver i Figma bygger du en HTML/CSS-skabelon og renderer til PNG ved byggetid (eller efter behov). Dette er, hvad Vercels @vercel/og, Cloudflare Workers og DuneTools’ egne OG-kort per side (se /og/ på dette websted) gør under motorhjelmen.

2. Skærmbilleder af komponenter

At vise et diagrambibliotek, en UI-komponent, et admin-dashboard, fang en specifik DOM-node lader dig indlejre et øjebliksbillede uden komplekse skærmbilledeværktøjer. Nyttigt til dokumentation, marketingsider, statussider.

3. E-mailvenlige billeder

E-mailklienter (særligt Outlook) har frygtelig HTML/CSS-understøttelse. En dynamisk faktura, et diagram, et statusmærke, render det serverside til PNG og indlejr som <img> for garanteret identisk rendering overalt.

4. Kvitteringer, fakturaer, certifikater

Statisk, ikke-redigerbar PDF/PNG-output af strukturerede HTML-data. Værktøjer som Stripe-kvitteringer, certifikatgeneratorer, billetprintere gør alle dette.

5. Vandmærkning og signerede billeder

Render dynamisk tekst/kode over et basisbillede som en enkelt komposit-PNG, til beskyttelse, attribution eller deling.

6. Kode-til-billede (det moderne alternativ til skærmbilleder)

Værktøjer som Carbon, Ray.so, Polacode renderer syntaksfremhævet kode som smukke, brandede billeder. Underliggende: HTML/CSS rendret til PNG.

Tilgange og afvejninger

A) Serverside: Puppeteer / Playwright

Kør en ægte Chromium-instans på serveren, naviger til en URL eller angiv HTML-indhold, tag skærmbillede.

Fordele: pixelperfekt gengivelse (det ER en ægte browser), fuld CSS/JS/skrifttypeunderstøttelse, kan håndtere enhver URL med cookies/auth.

Ulemper: tung (200+ MB Chromium-binær), langsom at starte op (~1-3 sekunder kold start), dyr på serverless. Kolde starter på AWS Lambda er berygtet smertefulde.

Bedst til: lavvolumen, højfidelitetsbehov (PDF-rapporter, fuldsides skærmbilleder, komplekst dynamisk indhold).

import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(htmlString);
const buffer = await page.screenshot({ type: 'png' });
await browser.close();

B) satori + resvg (Vercels tilgang)

Render JSX/HTML-lignende markup til SVG med satori (en tilpasset renderingsmotor), rasteriser derefter til PNG med resvg. Bruges af @vercel/og, Next.js OG-generering og DuneTools build-og.mjs-script.

Fordele: meget hurtig (~50-200 ms), lille afhængighed (~10 MB), virker i Edge-runtimes (Cloudflare Workers, Vercel Edge Functions, AWS Lambda@Edge).

Ulemper: delsæt af CSS (ingen z-index, begrænset Grid, ingen JS-kørsel). Du designer inden for begrænsningerne, men de dækker 90 % af OG-billedbrugsområder.

Bedst til: højvolumen OG-billedgenerering, Edge Functions, byggetidsrendering.

C) html2canvas / dom-to-image (klientside)

Rene JavaScript-biblioteker, der går gennem DOM, serialiserer den til SVG foreignObject og rasteriserer via HTML5 Canvas. Kører helt i brugerens browser.

Fordele: nul server, gratis, ingen CORS-problemer for samme-oprindelses-indhold, øjeblikkelig feedback.

Ulemper: subtile renderingsforskelle fra ægte browser (nogle CSS-funktioner approximeres, webskrifttypeindlæsning kræver omhu), CORS-blokerede eksterne ressourcer har brug for proxy.

Bedst til: klientside-fangst af komponenter, brugere ser på, skærmbillede-til-udklipsholder-funktioner, interne værktøjer.

D) DuneTools HTML til billede

En kombination af tilgang C med WebAssembly-accelereret rendering, designet til enkeltstående engangs-konverteringer. Indsæt HTML/CSS, få PNG/JPG tilbage uden at sætte infrastruktur op eller lære et bibliotek.

Fordele: nul installation, nul server, virker offline efter sideindlæsning, håndterer moderne CSS via browserens faktiske motor.

Ulemper: ikke til højvolumen programmatisk brug (brug B eller A til det).

Bedst til: udviklere, der har brug for enkeltstående HTML-til-billede-konverteringer uden at starte infrastruktur op.

Almindelige faldgruber

Webskrifttypeindlæsning

Hvis din HTML bruger en Google Font, har rendereren brug for skrifttypen indlæst før fangst. Løsninger:

  • Inline skrifttypen som en base64 data-URI i din CSS (virker overalt).
  • Vent på document.fonts.ready Promise før fangst (klientside).
  • Til serverside (Puppeteer): vent på networkidle0 før skærmbillede.

CORS-begrænsede billeder

Billeder fra eksterne domæner taggetag crossOrigin="anonymous" kan tegnes på canvas. Uden tagget (standard) kaster tegningen “tainted canvas”, din output-PNG kan ikke eksporteres.

Løsning: sørg for <img crossorigin="anonymous"> og at kildeserveren returnerer Access-Control-Allow-Origin. Dine egne ressourcer virker altid.

Baggrundsfarve

Gennemsigtig PNG-output er godt til nogle brugsområder (UI-komponenter, mærker), men katastrofalt for andre (den sociale forhåndsvisning bliver usynlig mod Twitters mørke tema). Indstil altid udtrykkeligt baggrund, medmindre transparens er ønsket.

Opløsning / DPI

En 1×1-fangst af en 1200 px bred DOM-node er 1200×Y, godt til normale skærme, men sløret på retina. Multiplicer med 2 (brug scale: 2 i html2canvas eller 2×bredde i puppeteer) til skarp retina-output.

Animation / dynamisk indhold

Fangst fryser det aktuelle frame. Hvis din DOM har indlæsningsspinnere, lazy-loadede billeder eller CSS-animationer, fanges de midt i animationen. Løsninger: vent på at animationer sætter sig (setTimeout efter requestAnimationFrame), tving sluttilstand via klasse eller pause animationer programmatisk før fangst.

Privatliv: hvornår lokal betyder noget

Serverbaserede skærmbilledetjenester (URL2PNG, Browserless, ScreenshotAPI, etc.) kører din HTML på deres infrastruktur. HTML’en, det rendrede billede, selv URL-parametre kan logges.

Til HTML, der indeholder følsomt UI (admin-dashboards med ægte data, interne værktøjer, kundeinformation), er dette en non-starter. Løsningen er klientside-rendering: HTML bliver i brugerens browser, renderes der, forlader aldrig.

DuneTools HTML til billede gør dette, indsæt din HTML, få PNG, intet logges nogen steder.

Hurtigreference: hvilket værktøj til hvilket behov

BehovVærktøj
Engangskonvertering, ingen infrastrukturDuneTools HTML til billede
Komponentskærmbillede i din egen apphtml2canvas / dom-to-image
OG-billeder ved byggetidsatori + resvg
Dynamiske OG-billeder efter behov på Edge@vercel/og
Serverside højfidelitet (fuldsider, PDF’er)Puppeteer / Playwright
Programmatisk batchkonverteringsatori (klientside) eller Puppeteer (server)

Reelle eksempler

Statiske blog-OG-billeder: hvert indlæg får et unikt 1200×630 PNG genereret ved byggetid med satori, med indlæggets titel, forfatter og accentfarve.

SaaS-kvitterings-PDF’er: render en HTML-fakturaskabelon serverside med Puppeteer, gem som PDF, vedhæft til e-mail.

Internt skærmbilledeværktøj: udviklerdashboard har “Del tilstand”-knap, der fanger nuværende sidetilstand via html2canvas og uploader til S3, til fejlrapporter, personale kan indsætte et eksakt skærmbillede af enhver visning.

Kode-til-billede-generator: kodeeditor + syntaksfremhævelse, når brugeren klikker “Eksporter”, kør html2canvas på den rendrede kodeblok, download PNG.

Marketingautomatisering: dynamiske annoncebilleder til betalte kampagner, i stedet for at designe 200 varianter i Figma, byg en HTML-skabelon, parametriser via URL, render til PNG efter behov.

Opsummering

HTML til billede er et løst problem med flere gode værktøjer, vælg ud fra brugsområde:

  • Brug for en engangs-PNG af vilkårlig HTML? DuneTools HTML til billede, nul infrastruktur, øjeblikkelig.
  • Bygger en app, der har brug for at fange brugerindhold? html2canvas klientside.
  • Genererer OG-billeder i skala? satori + resvg, byggetid eller Edge.
  • Brug for pixelperfekt server-gengivelse? Puppeteer.

Privatliv betyder noget: til følsom HTML (admin-UI’er, dashboards, interne værktøjer), vælg altid en klientside-mulighed, der ikke overfører din markup.