Hoe skep ek 'n plekhouer-beeld van 'n presiese grootte?

Tik die Breedte (px) en Hoogte (px), kies kleure of 'n Kleurtema, en klik dan Laai PNG af, Laai JPG af of Laai SVG af. By verstek wys die beeld sy afmetings, soos 800 x 600, as die etiket.

Wat is die grootste plekhouer-beeld wat ek kan genereer?

Breedte en hoogte moet elk tussen 1 en 4000 pixels wees. Waardes buite daardie reeks wys die fout Breedte en hoogte moet tussen 1 en 4000 px wees.

Hoe sit ek 'n plekhouer-beeld direk in HTML sonder 'n lêer?

Klik Kopieer as data-URL en plak dit in 'n img-merker as die src-waarde. Jy kan ook Kopeer HTML-fragment of Kopeer CSS-agtergrond gebruik. Geen eksterne beeldgasheer is nodig nie.

Kan ek standaard sosialemedia- of webgroottes genereer?

Ja. Voorinstelling groottes sluit in Instagram-pos, Instagram-storie, Twitter-kaart, Open Graph, YouTube-duimnael, Facebook-omslag en E-poskop. Laai alle voorstelle af (ZIP) stoor al elf as PNG-lêers.

Hoe sit ek my eie teks of diagonale lyne op die plekhouer?

Tik 'n etiket in Pasgemaakte teks, byvoorbeeld Hero image, in plaas daarvan om afmetings te wys. Merk Wys diagonale lyne (X) om flou diagonale te teken. Lang teks krimp outomaties om by die breedte te pas.

Is dit regtig gratis?

Ja. Elke instrument is gratis om te gebruik, sonder 'n rekening en sonder 'n kredietkaart. Die werk loop op jou toestel eerder as op ons bedieners, en dit is wat dit gratis hou om te loop.

Ja. Dit werk in huidige mobiele blaaiers op iOS en Android, sonder om iets te installeer.

🖼️

Gratis Plekhouer-beeldgenerator

Genereer gekleurde plekhouer-prente met pasgemaakte afmetings, teks en kleure. Standaardgroottes vir sosiale media, mockups en ontwerpsamestellings.

Loop in jou blaaierGeen aanmelding, geen opspringers nieGeen aanmelding benodigGratis vir altyd

Breedte (px)

Hoogte (px)

Voorinstelling groottes

Kleurtemplate

Agtergrond

Teks / lyne

Pasgemaakte teks (laat leeg vir afmetings)

Wys afmetings as geen pasgemaakte teksWys diagonale lyne (X)

💡 Vir HTML-modelle: gebruik die 'Kopieer as data-URL'-opsie en plak in <img src='...'> vir inlynplaashouers. Vir Figma / Sketch-ontwerpe, laai die PNG af en sleep dit in.

Algemene gebruike

Plekhouer-afbeeldings vir ontwerp-mockupsGenereer grootteveranderde gekleurde bokse vir gebruik in Figma, Sketch of web-ontwerp-mockups voor werklike afbeeldings klaar is.
Inlyn-plekshouer vir HTML-prototipesGebruik 'Kopieer as Data URL' om plekshouersafbeeldings direk in HTML in te stel vir vinnige prototipes.
Plekshouer vir CMS-inhoudsleersBy demonstrasie van CMS-malvormsels gebruik u plekshouersafbeeldings in plaas van werklike inhoud vir gevoelige voorvertonings.
Sosiale media beeldmalvormselsGenereer behoorlik grootteveranderde plekshouer vir Instagram, Facebook, Twitter, LinkedIn-plasingsmalvormsels.
CSS-uitleg-toetsafbeeldingsGenereer afbeeldings by uiterstes aspekverhoudings om responsiewe CSS-uitlegge stres-toets te doen.

Hoe dit werk

Alles gebeur in jou blaaier met die HTML Canvas-API en handgeskrewe SVG-opmaak — geen bediener, geen oplaai, geen derdeparty-diens nie. Jy stel afmetings, kleure, en etiketteks, en die nutsprogram verf die beeld direk op 'n canvas-element intyds, serialiseer dit dan na PNG, JPEG, of SVG op aanvraag.

1
Stel afmetings en kleure op
Tik 'n wydte en hoogte (1–4000 px elk), of kies een van elf voorinstellings wat algemene sosiale-media- en ontwerpgroottes dek. Kies 'n agtergrond- en tekskleur uit die ingeboude temas of tik enige heks-waarde direk in; 'n inheemse kleurkieser en 'n bekragtigde teksveld bly gesinkroniseer.
2
Canvas-API render die voorskou oombliklik
'n React-effek roep drawPlaceholder() aan by elke verandering. Hierdie funksie gebruik CanvasRenderingContext2D om die reghoek met die agtergrondkleur te vul, opsioneel dowwe diagonale kruisdraad-lyne teen 15%-dekking te teken, meet dan en sentreer jou etiketteks — en verklein die lettertipe outomaties totdat dit binne 90% van die canvaswydte pas.
3
Voer uit as PNG, JPEG, of SVG
PNG- en JPEG-aflaaie roep canvas.toDataURL() aan, skakel die base64-resultaat na 'n Blob in geheue om, en aktiveer die aflaai — alles sinchronies binne die gebruikersgebaar sodat iOS Safari se aflaaireëls voldoen word. SVG-uitvoer bou 'n selfbevatte SVG-string met 'n passende rect, opsionele diagonale lyne, en 'n teks-element, stoor dit dan as 'n .svg-lêer.
4
Massa-uitvoer en kopieer-kortpaaie
Die 'Laai alle voorinstellings af'-knoppie voer JSZip dinamies in, render elk van die elf voorinstelling-groottes weer op 'n skerm-af-canvas met dieselfde tekenfunksie, en pak alle PNG's in 'n enkele ZIP. Kopieerknoppies lewer 'n PNG-data-URL, 'n inlyn-SVG-img-etiket, of 'n CSS background-image-verklaring vir onmiddellike plak in kode.