Ինչպե՞ս ստեղծել ճշգրիտ չափի տեղապահ պատկեր

Մուտքագրեք Լայնությունը (px) և Բարձրությունը (px), ընտրեք գույներ կամ Գունային թեմա, ապա սեղմեք Ներբեռնել PNG, Ներբեռնել JPG կամ Ներբեռնել SVG: Լռելյայն պատկերը ցույց է տալիս իր չափերը, օրինակ՝ 800 x 600, որպես պիտակ:

Ո՞րն է ամենամեծ տեղապահ պատկերը, որ կարող եմ ստեղծել

Լայնությունը և բարձրությունը պետք է լինեն 1-ից 4000 px միջև: Այդ միջակայքից դուրս արժեքները ցույց են տալիս սխալը՝ Լայնությունը և բարձրությունը պետք է լինեն 1-ից 4000 px միջև:

Ինչպե՞ս տեղադրել տեղապահ պատկերն անմիջապես HTML-ում առանց ֆայլի

Սեղմեք Պատճենել որպես data URL և տեղադրեք այն img թեգի մեջ որպես src արժեք: Կարող եք նաև օգտագործել Պատճենել HTML հատված կամ Պատճենել CSS ֆոն: Արտաքին պատկերների հոսթինգ անհրաժեշտ չէ:

Կարո՞ղ եմ ստեղծել ստանդարտ սոցիալական մեդիայի կամ վեբ չափսեր

Այո: Կանխադրված չափերը ներառում են Instagram գրառում, Instagram հերթ, Twitter քարտ, Open Graph, YouTube նկարատե, Facebook շապիկ և Էլ. փոստի վերնագիր: Ներբեռնել բոլոր նախապես սահմանված (ZIP)-ը պահպանում է բոլոր տասնմեկը որպես PNG ֆայլեր:

Ինչպե՞ս տեղադրել իմ սեփական տեքստը կամ անկյունագծերը տեղապահի վրա

Մուտքագրեք պիտակ Հատուկ տեքստ դաշտում, օրինակ՝ Hero image, չափերը ցույց տալու փոխարեն: Նշեք Ցուցադրել անկյունային գծեր (X)՝ թույլ անկյունագծեր գծելու համար: Երկար տեքստն ինքնաբերաբար փոքրանում է լայնությանը տեղավորվելու համար:

Իսկապե՞ս անվճար է։

Այո: Յուրաքանչյուր գործիք անվճար է, առանց հաշվի և բանկային քարտի: Աշխատանքը կատարվում է ձեր սարքում, այլ ոչ թե մեր սերվերներում, ինչն էլ այն դարձնում է անվճար:

Արդյո՞ք այն աշխատում է բջջայինով:

Այո։ Աշխատում է iOS-ի և Android-ի ժամանակակից բջջային դիտարկիչներում՝ առանց տեղադրման։

🖼️

Տեղապահ պատկերի գեներատոր անվճար

Ստեղծեք գունագեղ տեղապահ պատկերներ կարգավորվող չափերով, տեքստով ու գույներով: Ստանդարտ չափեր սոցիալական մեդիայի, mockup-ների ու design comp-ների:

Գործում է ձեր բրաուզերումԱռանց գրանցման, առանց թռուցիկ պատուհաններիՄուտք չի պահանջվումԱնվճար ընդմիշտ

Լայնություն (px)

Բարձրություն (px)

Կանխադրված չափեր

Գունային թեմաներ

Ֆոն

Տեքստ / գծեր

Հատուկ տեքստ (չափերի համար թողեք դատարկ)

Ցուցադրել չափերը, եթե հատուկ տեքստ չկաՑուցադրել անկյունային գծեր (X)

💡 HTML մակետների համար. օգտագործեք «Պատճենել որպես data URL» տարբերակը և տեղադրեք <img src="...">-ի մեջ ներկառուցված տեղապահների համար։ Figma / Sketch դիզայնների համար ներբեռնեք PNG-ն և քաշեք ներս։

Տարածված կիրառություններ

Դիզայն Mockup-ների համար նկարներ պահեքՍտեղծեք տվյալ չափերի գունավոր տուփեր Figma-ում, Sketch-ում կամ վեբ դիզայնի մակետներում օգտագործելու համար, մինչ իրական պատկերները պատրաստ կլինեն։
HTML մեջ նկարներ փակցրեքԴրամատիկ մեջ պահ պատկերներ ուղղակի HTML մեջ փակցրեք 'պատճեն ինչպես URL որ' - տեղից prototypes:
CMS բովանդակ Slot-ներ համար պահել նկարներCMS շաբլոն ցուցադրելիս, պահել նկարներ Եղիս բովանդակ փոխարեն բնական նյութերի համար հեռեկ լինել:
Սոցիալական ճառ պատկեր Կաղապար-ներՍտեղծեք ճիշտ չափ նկարներ Instagram, Facebook, Twitter, LinkedIn գրառումների շաբլոնների համար:
CSS Layout Testing պատկերներՍտեղծեք պատկերներ Extremeacciones Aspect նկարակերպ մեջ կես-թեստ responsive CSS կազմավորում:

Ինչպես է այն աշխատում

Ամեն ինչ տեղի է ունենում ձեր դիտարկիչում՝ օգտագործելով HTML Canvas API-ն և ձեռագիր SVG նշագրում — ոչ մի սերվեր, ոչ մի վերբեռնում, ոչ մի երրորդ կողմի ծառայություն։ Դուք սահմանում եք չափեր, գույներ և պիտակի տեքստ, և գործիքը պատկերը ուղղակիորեն ներկում է canvas տարրի վրա իրական ժամանակում, ապա սերիալացնում է այն PNG, JPEG կամ SVG-ի՝ ըստ ցանկության։

1
Կազմաձևեք չափերն ու գույները
Մուտքագրեք լայնություն և բարձրություն (1–4000 պիքսել յուրաքանչյուրը), կամ ընտրեք տասնմեկ նախապատրաստվածներից մեկը, որոնք ընդգրկում են սովորական սոցիալական մեդիայի և ձևավորման չափերը։ Ընտրեք ֆոնի և տեքստի գույն ներկառուցված ոճերից կամ ուղղակիորեն մուտքագրեք ցանկացած տասնվեցական արժեք. բնիկ գունի ընտրիչը և վավերացված տեքստային դաշտը մնում են համաժամանակ։
2
Canvas API-ն ակնթարթորեն մատուցում է նախադիտումը
React էֆեկտը կանչում է drawPlaceholder() ամեն փոփոխության ժամանակ։ Այս ֆունկցիան օգտագործում է CanvasRenderingContext2D-ը ուղղանկյունը ֆոնի գույնով լցնելու, ընտրովի կերպով 15% թափանցիկությամբ աղոտ անկյունագծային խաչանշանի գծեր գծելու, ապա ձեր պիտակի տեքստը չափելու և կենտրոն-հավասարեցնելու համար — ինքնաբերաբար փոքրացնելով տառատեսակը, մինչև այն տեղավորվի canvas-ի լայնության 90%-ի մեջ։
3
Արտահանում որպես PNG, JPEG կամ SVG
PNG և JPEG ներբեռնումները կանչում են canvas.toDataURL(), base64 արդյունքը հիշողության մեջ փոխարկում են Blob-ի, և գործարկում են ներբեռնումը — ամեն ինչ համաժամանակորեն օգտագործողի ժեստի ներսում, որպեսզի iOS Safari-ի ներբեռնման կանոնները բավարարվեն։ SVG արտահանումը կառուցում է ինքնուրույն SVG տող համապատասխան rect-ով, ընտրովի անկյունագծային գծերով և տեքստային տարրով, ապա պահում է այն որպես .svg ֆայլ։
4
Խմբաքանակային արտահանում և պատճենման դյուրանցումներ
«Ներբեռնել բոլոր նախապատրաստվածները» կոճակը դինամիկորեն ներմուծում է JSZip, կրկին մատուցում է տասնմեկ նախապատրաստված չափերից ամեն մեկը էկրանից-դուրս canvas-ի վրա՝ օգտագործելով նույն նկարման ֆունկցիան, և բոլոր PNG-ները փաթեթավորում է մեկ ZIP-ի մեջ։ Պատճենման կոճակները արտադրում են PNG տվյալների URL, ներգծված SVG img պիտակ, կամ CSS background-image հայտարարություն՝ կոդի մեջ անմիջական փակցնման համար։