Jinsi ya kuunda picha ya kiolezo ya ukubwa halisi?

Andika Upana (px) na Urefu (px), chagua rangi au Mandhari ya rangi, kisha bofya Pakua PNG, Pakua JPG au Pakua SVG. Kwa chaguo-msingi picha inaonyesha vipimo vyake, kama 800 x 600, kama lebo.

Je, ni picha ya kiolezo kubwa kiasi gani naweza kuzalisha?

Upana na urefu lazima kila moja iwe kati ya 1 na 4000 pikseli. Thamani zilizo nje ya safu hiyo zinaonyesha hitilafu Upana na urefu lazima uwe kati ya 1 na 4000 px.

Jinsi ya kuweka picha ya kiolezo moja kwa moja kwenye HTML bila faili?

Bofya Nakili kama data URL na ubandike kwenye tagi ya img kama thamani ya src. Unaweza pia kutumia Nakili sehemu ya HTML au Nakili mandhariko ya CSS. Hakuna mwenyeji wa picha wa nje anayehitajika.

Je, naweza kuzalisha ukubwa wa kawaida wa mitandao ya kijamii au wavuti?

Ndiyo. Ukubwa wa mwanzo unajumuisha Chapisho la Instagram, Hadithi ya Instagram, Kadi ya Twitter, Fungua Grafu, Picha ndogo ya YouTube, Jalada la Facebook na Kichwa cha barua pepe. Pakua maanaa yote (ZIP) huhifadhi zote kumi na moja kama faili za PNG.

Jinsi ya kuweka maandishi yangu mwenyewe au mistari ya diagonal kwenye kiolezo?

Andika lebo katika Maandishi maalum, kwa mfano Picha ya shujaa, badala ya kuonyesha vipimo. Tiki Onyesha mistari ya diagonal (X) ili kuchora diagonali hafifu. Maandishi marefu yanajifinya kiotomatiki ili kutoshea upana.

Ndiyo. Kila zana ni bure kutumia, bila akaunti na bila kadi ya mkopo. Kazi inafanyika kwenye kifaa chako badala ya seva zetu, jambo linaloiwezesha kuwa bure kutumika.

Je, inafanya kazi kwenye simu?

Ndiyo. Inafanya kazi kwenye vivinjari vya kisasa vya simu vya iOS na Android, bila kusakinisha chochote.

🖼️

Jenereta ya Picha ya Kiolezo bila malipo

Tengeneza picha za kiolezo zenye rangi na vipimo maalum, maandishi, na rangi. Ukubwa wa kawaida kwa mitandao ya kijamii, mifano ya mwonekano, na mapambo ya muundo.

Inafanya kazi kwenye kivinjari chakoHakuna usajili, hakuna madirisha ibukiziHakuna kuingia kinachohitajikaBure milele

Upana (px)

Urefu (px)

Ukubwa wa mwanzo

Mandhari ya rangi

Mandharinyuma

Maandishi / mistari

Maandishi maalum (acha wazi kwa vipimo)

Onyesha vipimo kama hakuna maandishi maalumOnyesha mistari ya diagonal (X)

💡 Kwa mifano ya HTML: tumia chaguo la 'Nakili kama data URL' na ubandike kwenye <img src='...'> kwa visimamo vya ndani. Kwa muundo wa Figma / Sketch, pakua PNG na uiburuze ndani.

Matumizi ya kawaida

Picha za mahali kwa ajili ya mfano wa muundoZaa sanduku la rangi linaloweza kusambazwa kwa ajili ya kutumiwa katika Figma, Sketch, au mfano wa muundo wa wavuti kabla picha za kweli ziko tayari.
Mahali pa mstari kwa ajili ya HTML PrototypesTumia 'Nakala kama Data URL' kwa kubandika picha za mahali moja kwa moja katika HTML kwa ajili ya prototypes haraka.
Mahali kwa ajili ya CMS Content SlotsWakati wa kuonyesha kigezo cha CMS, tumia picha za mahali badala ya maudhui ya kweli kwa ajili ya muhtasari wasiotaka.
Vigezo vya Picha ya KijamiiZaa mahali pa ukubwa sahihi kwa ajili ya Instagram, Facebook, Twitter, vigezo vya chapisho la LinkedIn.
Picha za Mtihani wa CSS LayoutZaa picha katika mahususi ya uwiano wa jamaa kwa ajili ya mtihani wa CSS layout inayojibu.

Jinsi Inavyofanya Kazi

Kila kitu kinafanyika kwenye kivinjari chako kwa kutumia HTML Canvas API na msimbo wa SVG ulioandikwa mwenyewe — hakuna seva, hakuna upakiaji, hakuna huduma ya mtu wa tatu. Unaweka vipimo, rangi, na maandishi ya lebo, na kifaa kinapaka picha moja kwa moja kwenye kipengele cha kanvasi papo hapo, kisha kuisawazisha kuwa PNG, JPEG, au SVG unapoomba.

1
Panga vipimo na rangi
Andika upana na urefu (px 1–4000 kila mmoja), au chagua mmoja wa mipangilio kumi na moja ya awali inayofunika ukubwa wa kawaida wa mitandao ya kijamii na muundo. Chagua rangi ya mandhari ya nyuma na maandishi kutoka mandhari zilizojengwa ndani au weka thamani yoyote ya hex moja kwa moja; kichagua rangi cha asili na uwanja wa maandishi ulioidhinishwa vinabaki sambamba.
2
Canvas API inaonyesha onyesho la awali papo hapo
Athari ya React inaita drawPlaceholder() kwa kila mabadiliko. Kazi hii inatumia CanvasRenderingContext2D kujaza mstatili na rangi ya mandhari ya nyuma, kwa hiari kuchora mistari hafifu ya msalaba wa mlalo kwa uwazi wa 15%, kisha kupima na kupanga katikati maandishi ya lebo yako — kupunguza fonti kiotomatiki hadi ifae ndani ya 90% ya upana wa kanvasi.
3
Toa kama PNG, JPEG, au SVG
Upakuaji wa PNG na JPEG unaita canvas.toDataURL(), kubadilisha matokeo ya base64 kuwa Blob kwenye kumbukumbu, na kuanzisha upakuaji — vyote kwa usawazishaji ndani ya ishara ya mtumiaji ili sheria za upakuaji za iOS Safari zitimizwe. Utoaji wa SVG unajenga mfuatano wa SVG uliojitegemea wenye mstatili unaolingana, mistari ya hiari ya msalaba, na kipengele cha maandishi, kisha kuuhifadhi kama faili la .svg.
4
Utoaji wa wingi na njia za mkato za kunakili
Kitufe cha 'Pakua mipangilio yote ya awali' kinaingiza kwa nguvu JSZip, kuonyesha upya kila moja ya ukubwa kumi na moja wa mipangilio ya awali kwenye kanvasi isiyoonekana kwa kutumia kazi ile ile ya kuchora, na kufungasha PNG zote kuwa ZIP moja. Vitufe vya kunakili vinatoa URL ya data ya PNG, lebo ya img ya SVG ya ndani, au tamko la background-image la CSS kwa kubandika papo hapo kwenye msimbo.