NL

HTML naar afbeelding omzetten

Met dit hulpmiddel zet je HTML om naar een afbeelding: plak de code, kies een breedte, klik op „Afbeelding maken“ en download een PNG, JPG of WebP. De afbeelding ontstaat in je browser: je code wordt niet geüpload, niet opgeslagen en niet in de adresbalk gezet.

Bron: W3C SVG 2 – foreignObject (HTML-Inhalt in SVG einbetten). Bijgewerkt: .

px
Breedte van de afbeelding in CSS-pixels (50–4.000)
px
0 = automatisch naar inhoud
px
Ruimte tussen inhoud en rand van de afbeelding
Mijn toolboxJe invoer wordt alleen in deze browser opgeslagen.

HTML met inline stijlen of een <style>-blok. Afbeeldingen alleen als Base64 (data:image/…), lettertypen alleen van het systeem. Scripts en externe adressen worden verwijderd.

Je tekst blijft in je browser: hij wordt niet verstuurd, niet opgeslagen en niet in de adresbalk gezet.

Resultaat

Uitvoer
Afbeelding 600 px breed, resolutie 2× → 1.200 px

Zo wordt het berekend

Zo wordt HTML een afbeelding

Je browser tekent de HTML-code als een afbeelding: eerst wordt de code opgeschoond, daarna weergegeven als SVG met ingebedde HTML (foreignObject) en geschilderd op een canvas dat als PNG, JPG of WebP wordt opgeslagen. Dat werkt voor kaarten, citaten, tabellen, factuurfragmenten, e-mailblokken of voorbeeldafbeeldingen voor social media – alles wat je met HTML en CSS kunt vormgeven.

Wat wordt ondersteund

Wat niet werkt

Scripts draaien niet, afbeeldingen, lettertypen en stijlbladen van andere adressen worden niet geladen, en animaties, hover-effecten, iframe, canvas en video leveren geen beeld op. Zulke delen worden bij het opschonen verwijderd; een melding onder het resultaat vertelt het je. De weergave kan iets afwijken van een echte pagina, omdat de browser hier alleen je fragment tekent.

Formaat, scherpte en bestandstype

Privacy en veiligheid

Je code wordt alleen in je browser verwerkt en nergens opgeslagen. Scripts, gebeurtenisattributen zoals onclick en externe adressen worden vóór het tekenen verwijderd. Wil je liever tekst op een bestaande foto zetten, gebruik dan tekst op foto zetten.

Veelgestelde vragen

Hoe zet ik HTML om naar een afbeelding?

Plak de HTML-code, kies breedte en resolutie en klik op „Afbeelding maken“. Download daarna de afbeelding als PNG, JPG of WebP.

Waarom worden mijn afbeeldingen niet getoond?

Afbeeldingen van andere adressen (https://…) worden om veiligheidsredenen niet geladen. Sluit ze in als Base64-adres (data:image/…) of gebruik inline SVG.

Wordt mijn code geüpload?

Nee. De code wordt in je browser gelezen en daar in een afbeelding getekend. Hij wordt niet verzonden of opgeslagen.

Hoe krijg ik een transparante achtergrond?

Kies de achtergrond „Transparant“ en het formaat PNG of WebP. JPG kent geen transparantie en krijgt altijd een witte achtergrond.

Waarom is de afbeelding onscherp?

Zet de resolutie op 2× of 3×. De afbeelding heeft dan twee of drie keer zoveel pixels bij dezelfde weergavegrootte.

Werken Google Fonts?

Nee, weblettertypen van internet worden niet opgehaald. Gebruik systeemlettertypen zoals Arial, Georgia of Verdana, of lettertypen die op je apparaat staan.

Bronnen en wettelijke basis

Bijgewerkt op: · Redactioneel beleid

Vergelijkbare tools