Paano ako gagawa ng placeholder na larawan na may eksaktong sukat?

I-type ang Lapad (px) at Taas (px), pumili ng mga kulay o isang Color theme, pagkatapos ay i-click ang I-download ang PNG, I-download ang JPG o I-download ang SVG. Bilang default, ipinapakita ng larawan ang mga dimensyon nito, tulad ng 800 x 600, bilang label.

Ano ang pinakamalaking placeholder na larawan na maaari kong gawin?

Ang lapad at taas ay dapat na nasa pagitan ng 1 at 4000 pixel bawat isa. Ang mga halagang nasa labas ng saklaw na iyon ay nagpapakita ng error na Ang lapad at taas ay dapat na nasa pagitan ng 1 at 4000 px.

Paano ko direktang ilalagay ang isang placeholder na larawan sa HTML nang walang file?

I-click ang Kopyahin bilang data URL at i-paste ito sa isang img tag bilang ang src value. Maaari mo ring gamitin ang Kopyahin ang HTML snippet o Kopyahin ang CSS na background. Hindi kailangan ng external na image host.

Maaari ba akong gumawa ng mga karaniwang sukat para sa social media o web?

Oo. Kasama sa Mga preset na sukat ang Post sa Instagram, Story sa Instagram, Card ng Twitter, Open Graph, Thumbnail ng YouTube, Cover sa Facebook at Header ng Email. Sine-save ng I-download ang lahat ng preset (ZIP) ang lahat ng labing-isa bilang mga PNG file.

Paano ko ilalagay ang aking sariling teksto o mga diagonal na linya sa placeholder?

Mag-type ng label sa Custom na teksto, halimbawa Hero image, sa halip na ipakita ang mga dimensyon. Lagyan ng tsek ang Ipakita ang mga diagonal na linya (X) upang gumuhit ng malabong mga diagonal. Awtomatikong lumiliit ang mahabang teksto upang magkasya sa lapad.

Oo. Libre ang bawat tool, walang account at walang credit card. Ang trabaho ay tumatakbo sa iyong device sa halip na sa aming mga server, kaya ito nananatiling libre.

Gumagana ba ito sa mobile?

Oo. Gumagana ito sa mga kasalukuyang mobile browser sa iOS at Android, nang walang ini-install.

🖼️

Libreng Generator ng Placeholder na Larawan

Gumawa ng mga may kulay na placeholder na larawan na may custom na dimensyon, teksto, at kulay. Mga karaniwang laki para sa social media, mockup, at design comp.

Tumatakbo sa iyong browserWalang pag-sign up, walang pop-upHindi kailangan ng loginLibre magpakailanman

Lapad (px)

Taas (px)

Mga preset na sukat

Mga tema ng kulay

Background

Teksto / linya

Custom na teksto (iwanang blangko para sa dimensyon)

Ipakita ang dimensyon kung walang custom na tekstoIpakita ang mga diagonal na linya (X)

💡 Para sa HTML mockup: gamitin ang opsyong "Kopyahin bilang data URL" at i-paste sa <img src="..."> para sa inline na placeholder. Para sa Figma / Sketch design, i-download ang PNG at i-drag papasok.

Mga karaniwang gamit

Placeholder Image para sa Design MockupBumuo ng sized colored box para sa paggamit sa Figma, Sketch, o web design mockup bago ang mga tunay na imahe ay handa.
Inline Placeholder para sa HTML PrototypeGamitin ang 'Copy as data URL' upang i-inline ang placeholder image direkta sa HTML para sa mabilis na prototype.
Placeholder para sa CMS Content SlotKapag nag-demo ng CMS template, gumamit ng placeholder image sa halip na real content para sa sensitive preview.
Social Media Image TemplateBumuo ng correctly-sized placeholder para sa Instagram, Facebook, Twitter, LinkedIn post template.
CSS Layout Testing ImageBumuo ng mga larawan sa extreme aspect ratio upang i-stress-test ang responsive CSS layout.

Paano ito Gumagana

Nangyayari ang lahat sa iyong browser gamit ang HTML Canvas API at hand-written na SVG markup — walang server, walang upload, walang third-party na serbisyo. Itinatakda mo ang sukat, kulay, at text ng label, at direktang ipinipinta ng tool ang larawan sa isang canvas element nang real time, pagkatapos ay sine-serialize sa PNG, JPEG, o SVG kapag hiniling.

1
I-configure ang sukat at kulay
Mag-type ng lapad at taas (1–4000 px bawat isa), o pumili sa labing-isang preset para sa karaniwang laki sa social media at disenyo. Pumili ng kulay ng background at text mula sa mga built-in na tema o maglagay ng anumang hex value; magkasabay na nag-a-update ang native na color picker at ang na-validate na text field.
2
Agad nire-render ng Canvas API ang preview
Tinatawag ng isang React effect ang drawPlaceholder() sa bawat pagbabago. Ginagamit ng function na ito ang CanvasRenderingContext2D para punuin ang parihaba ng kulay ng background, opsyonal na gumuhit ng malabong pahilis na cross-hair line sa 15% opacity, pagkatapos ay sukatin at igitna ang text ng label mo — awtomatikong pinaliliit ang font hanggang magkasya sa loob ng 90% ng lapad ng canvas.
3
I-export bilang PNG, JPEG, o SVG
Tinatawag ng mga PNG at JPEG download ang canvas.toDataURL(), kino-convert ang base64 na resulta sa isang Blob sa memory, at nagti-trigger ng download — lahat ay synchronous sa loob ng user gesture para masunod ang mga patakaran sa download ng iOS Safari. Bumubuo ang SVG export ng self-contained na SVG string na may katugmang rect, opsyonal na pahilis na linya, at text element, pagkatapos ay sine-save bilang .svg file.
4
Batch export at mga shortcut sa pagkopya
Dynamic na ini-import ng button na 'Download all presets' ang JSZip, nire-render ulit ang bawat isa sa labing-isang preset na laki sa isang off-screen na canvas gamit ang parehong draw function, at ini-package ang lahat ng PNG sa iisang ZIP. Naglalabas ang mga copy button ng PNG data URL, inline na SVG img tag, o CSS background-image declaration para agad i-paste sa code.

Mga Kaugnay na Tool

📄

Gumagawa ng Lorem Ipsum

Gumawa ng Lorem Ipsum placeholder na teksto. Pumili ng mga salita, pangungusap, o talata. Kopyahin sa isang click.

Subukan

🖼️

Tagapiga ng Larawan

I-compress ang mga JPG, PNG, WebP, at AVIF na larawan. Tingnan ang paghahambing bago/pagkatapos.

SubukanLokal ang mga file

📐

Tagapalit-laki ng Larawan

Baguhin ang laki ng mga larawan ayon sa mga sukat o porsyento. Panatilihin ang aspect ratio, piliin ang format ng output, walang pagkawala ng kalidad.