Hoe maak ik een plaatsaanduidingsafbeelding van een exact formaat?

Typ de Breedte (px) en Hoogte (px), kies kleuren of een Kleurenthema en klik op PNG downloaden, JPG downloaden of SVG downloaden. Standaard toont de afbeelding de afmetingen, zoals 800 x 600, als label.

Wat is de grootste plaatsaanduidingsafbeelding die ik kan genereren?

Breedte en hoogte moeten elk tussen 1 en 4000 pixels liggen. Waarden buiten dat bereik tonen de foutmelding Breedte en hoogte moeten tussen 1 en 4000 px liggen.

Hoe plaats ik een plaatsaanduidingsafbeelding direct in HTML zonder bestand?

Klik op Kopiëren als data URL en plak deze in een img-tag als de src-waarde. Je kunt ook HTML-fragment kopiëren of CSS-achtergrond kopiëren gebruiken. Er is geen externe afbeeldingshost nodig.

Kan ik standaardformaten voor sociale media of web genereren?

Ja. Vooringestelde formaten omvatten Instagram-bericht, Instagram-story, Twitter-kaart, Open Graph, YouTube-miniatuur, Facebook-omslagafbeelding en E-mailheader. Alle voorinstellingen downloaden (ZIP) slaat alle elf op als PNG-bestanden.

Hoe zet ik mijn eigen tekst of diagonale lijnen op de plaatsaanduiding?

Typ een label in Aangepaste tekst, bijvoorbeeld Hero image, in plaats van de afmetingen te tonen. Vink Diagonale lijnen tonen (X) aan om vage diagonalen te tekenen. Lange tekst krimpt automatisch om binnen de breedte te passen.

Ja. Elke tool is gratis te gebruiken, zonder account en zonder creditcard. Het werk gebeurt op jouw apparaat in plaats van op onze servers, en daarom is het gratis te gebruiken.

Ja. Het werkt in actuele mobiele browsers op iOS en Android, zonder iets te installeren.

🖼️

Gratis Plaatsaanduidingsafbeeldinggenerator

Genereer gekleurde plaatsaanduidingsafbeeldingen met aangepaste afmetingen, tekst en kleuren. Standaardformaten voor sociale media, mockups en designschetsen.

Draait in je browserGeen aanmelding, geen pop-upsGeen aanmelding vereistVoor altijd gratis

Breedte (px)

Hoogte (px)

Vooringestelde formaten

Kleurthema's

Achtergrond

Tekst / lijnen

Aangepaste tekst (leeg laten voor afmetingen)

Afmetingen tonen als er geen tekst isDiagonale lijnen tonen (X)

💡 Voor HTML-mockups: gebruik 'Kopiëren als data URL' en plak in <img src="..."> als inline placeholder. Voor Figma / Sketch-ontwerpen downloadt u de PNG en sleept u die naar binnen.

Veelvoorkomend gebruik

Plaatshoudersafbeeldingen voor OntwerpmodellenGenereer gekleurde vakken op maat voor gebruik in Figma, Sketch of webontwerpen voordat echte afbeeldingen gereed zijn.
Inline Plaatshouders voor HTML-PrototypesGebruik 'Kopiëren als gegevens-URL' om plaatshoudersafbeeldingen rechtstreeks in HTML in te sluiten voor snelle prototypes.
Plaatshouders voor CMS-inhoudssleuvenWanneer u een CMS-sjabloon demonstreert, gebruikt u plaatshoudersafbeeldingen in plaats van echte inhoud voor gevoelige voorbeelden.
Sjablonen voor Afbeeldingen op Sociale MediaGenereer plaatshouders op de juiste grootte voor Instagram-, Facebook-, Twitter- en LinkedIn-postsjablonen.
CSS-indelingsafbeeldingen testenGenereer afbeeldingen op extreme beeldverhoudingen om responsieve CSS-indelingen te testen.

Hoe het werkt

Alles gebeurt in je browser met de HTML Canvas API en zelfgeschreven SVG-opmaak — geen server, geen upload, geen dienst van derden. Je stelt afmetingen, kleuren en labeltekst in, en de tool tekent de afbeelding in realtime direct op een canvas-element en zet die op verzoek om naar PNG, JPEG of SVG.

1
Afmetingen en kleuren instellen
Typ een breedte en hoogte (elk 1–4000 px) of kies een van elf voorinstellingen voor gangbare formaten voor sociale media en ontwerp. Kies een achtergrond- en tekstkleur uit de ingebouwde thema's of voer direct een hexwaarde in; een native kleurkiezer en een gecontroleerd tekstveld blijven synchroon.
2
De Canvas API toont het voorbeeld direct
Een React-effect roept bij elke wijziging drawPlaceholder() aan. Die functie gebruikt CanvasRenderingContext2D om de rechthoek met de achtergrondkleur te vullen, optioneel vage diagonale kruislijnen op 15% dekking te tekenen en daarna je labeltekst te meten en te centreren — waarbij het lettertype automatisch kleiner wordt tot de tekst binnen 90% van de canvasbreedte past.
3
Exporteren als PNG, JPEG of SVG
PNG- en JPEG-downloads roepen canvas.toDataURL() aan, zetten het base64-resultaat in het geheugen om naar een Blob en starten de download — allemaal synchroon binnen de gebruikersactie, zodat aan de downloadregels van iOS Safari wordt voldaan. SVG-export bouwt een zelfstandige SVG-tekenreeks met een bijpassende rect, optionele diagonale lijnen en een text-element, en slaat die op als .svg-bestand.
4
Export in bulk en kopieersnelkoppelingen
De knop 'Alle voorinstellingen downloaden' importeert JSZip dynamisch, tekent elk van de elf formaten opnieuw op een onzichtbaar canvas met dezelfde tekenfunctie en verpakt alle PNG's in één ZIP. Kopieerknoppen leveren een PNG-data-URL, een inline SVG img-tag of een CSS background-image-declaratie om direct in code te plakken.