Kuidas luua täpses suuruses kohatäitepilti?

Sisesta Laius (px) ja Kõrgus (px), vali värvid või Värviteema ja seejärel klõpsa Laadi alla PNG, Laadi alla JPG või Laadi SVG. Vaikimisi kuvab pilt sildina oma mõõtmeid, näiteks 800 x 600.

Mis on suurim kohatäitepilt, mida ma saan genereerida?

Laius ja kõrgus peavad mõlemad olema vahemikus 1 kuni 4000 pikslit. Väljaspool seda vahemikku olevad väärtused kuvavad veateate Laius ja kõrgus peavad olema vahemikus 1 kuni 4000 px.

Kuidas panna kohatäitepilt otse HTML-i ilma failita?

Klõpsa Kopeeri andme-URL-na ja kleebi see img sildi src väärtuseks. Võid kasutada ka Kopeeri HTML koodilõik või Kopeeri CSS taust. Välist pildimajutajat pole vaja.

Kas ma saan genereerida standardseid sotsiaalmeedia või veebi suurusi?

Jah. Eelmääratud suurused hõlmavad Instagrami postitus, Instagrami lugu, Twitteri kaart, Avatud graafika, YouTube pisipilt, Facebooki kaane pildi ja E-posti päis. Laadi kõik eelseaded (ZIP) salvestab kõik üksteist PNG-failina.

Kuidas panna kohatäitepildile oma teksti või diagonaaljooni?

Sisesta silt Kohandatud tekst väljale, näiteks Kangelase pilt, selle asemel et kuvada mõõtmeid. Märgi Näita diagonaaljooni (X), et joonistada nõrgad diagonaalid. Pikk tekst kahaneb automaatselt, et laiusesse mahtuda.

Kas see on tõesti tasuta?

Jah. Iga tööriist on tasuta kasutamiseks, ei nõua kontot ega krediitkaarti. Töö toimub sinu seadmes, mitte meie serverites, mis võimaldabki seda tasuta pakkuda.

Kas see töötab mobiilseadmetes?

Jah. See töötab tänapäevastes mobiilibrauserites iOS-is ja Androidis ning midagi pole vaja installida.

🖼️

Kohatäitepildi generaator tasuta

Loo värvilisi kohatäitepilte kohandatud mõõtmete, teksti ja värvidega. Standardsuurused sotsiaalmeedia, makettide ja disaini komponentide jaoks.

Töötab sinu brauserisRegistreerimist pole, hüpikaknaid poleSisselogimist ei nõutaIgavesti tasuta

Laius (px)

Kõrgus (px)

Eelmääratud suurused

Värviskeemid

Taust

Tekst / jooned

Kohandatud tekst (jäta tühjaks mõõtmete jaoks)

Näita mõõtmeid, kui kohandatud tekst puudubNäita diagonaaljooni (X)

💡 HTML-makettide jaoks: kasuta valikut 'Kopeeri andme-URL-na' ja kleebi <img src="..."> väljakaevamiskohtade jaoks. Figma / Sketchi kujunduste jaoks laadi alla PNG ja lohista sisse.

Levinud kasutusviisid

Kohatäite pildid kujunduse makettideleLooge suuruse muudetavad värvitud kastid kasutamiseks Figmas, Sketch-is või veebisaidi kujunduse makettides enne reaalsete piltide valmistumist.
Manustatud kohatäited HTML makettideleKasutage "Kopieer andmete URL-ina", et otse HTML-i manustada kohatäite pildid kiireteks makettideks.
Kohatäited CMS sisu lindideleCMS mallide demonstreerimisel kasutage kohatäite pilte tegeliku sisu asemel tundlike eelvaadete jaoks.
Sotsiaalmeedia piltide mallidLooge õigesti suurustatud kohatäited Instagrami, Facebooki, Twitteri, LinkedIn postituste mallidele.
CSS paigutuse testi pildidLooge pildid äärmuslike aspektsuhetega CSS paigutuse stressitestide jaoks.

Kuidas see töötab

Kõik toimub sinu brauseris HTML Canvas API ja käsitsi kirjutatud SVG-markupi abil — servet, üleslaadimist, kolmanda osapoole teenust pole. Sead mõõtmed, värvid ja sildi teksti ning tööriist maalib pildi otse lõuendielemendile reaalajas, seejärel serialiseerib selle PNG-ks, JPEG-ks või SVG-ks vastavalt nõudmisele.

1
Konfigureeri mõõtmed ja värvid
Kirjuta laius ja kõrgus (1–4000 px kumbki), või vali üks üheteistkümnest eelseadistusest, mis katavad levinud sotsiaalmeedia ja disainisuurusi. Vali tausta- ja tekstivärv sisseehitatud teemadest või sisesta mis tahes kuueteistkümnendväärtus otse; natiivne värvivalija ja valideeritud tekstiväli jäävad sünkroonseks.
2
Canvas API renderdab eelvaate koheselt
React'i efekt kutsub drawPlaceholder() igal muudatusel. See funktsioon kasutab CanvasRenderingContext2D'd, et täita ristkülik taustavärviga, valikuliselt joonistada tuhmid diagonaalsed ristjooned 15% läbipaistmatusega, seejärel mõõta ja keskjoondada su sildi teksti — automaatselt kahandades fonti, kuni see mahub 90% lõuendi laiusesse.
3
Ekspordi PNG-na, JPEG-na või SVG-na
PNG ja JPEG allalaadimised kutsuvad canvas.toDataURL(), teisendavad base64 tulemuse Blob'iks mälus, ja käivitavad allalaadimise — kõik sünkroonselt kasutaja žesti sees, nii et iOS Safari allalaadimisreeglid on täidetud. SVG eksport ehitab iseseisva SVG-stringi vastava rect-i, valikuliste diagonaaljoonte ja tekstielemendiga, seejärel salvestab selle .svg failina.
4
Lote eksport ja kopeerimise otseteed
Nupp 'Laadi alla kõik eelseadistused' impordib dünaamiliselt JSZip'i, renderdab iga üheteistkümnest eelseadistatud suurusest uuesti ekraanivälisele lõuendile sama joonistusfunktsiooni abil, ja pakendab kõik PNG-d ühte ZIP-i. Kopeerinupud väljastavad PNG andme-URL-i, reasisese SVG img sildi või CSS background-image deklaratsiooni kohesteks koodikleepimisteks.