Olùmúdásílẹ̀ Àwòrán Ìdípò Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

Ohun gbogbo ń ṣẹlẹ̀ nínú aṣàwákiri rẹ ní lílo API Canvas HTML àti àmì SVG tí a fi ọwọ́ kọ — kò sí sáfà, kò sí gbígbé sókè, kò sí iṣẹ́ ẹnì kẹta. O ń ṣètò àwọn ìwọ̀n, àwọ̀, àti ọ̀rọ̀ àmì, irinṣẹ́ náà sì ń yà àwòrán náà tààrà sórí ẹ̀yà canvas kan ní àkókò gidi, kí ó sì ṣe serialize rẹ̀ sí PNG, JPEG, tàbí SVG nígbà tí a bá béèrè.

1. 1
   Ṣètò àwọn ìwọ̀n àti àwọ̀

   Kọ ìbú àti gíga (1–4000 px kọ̀ọ̀kan), tàbí yan ọ̀kan lára àwọn ìṣètò tẹ́lẹ̀ mọ́kànlá tí ó bo àwọn ìwọ̀n àwùjọ àti àṣàrò wọ́pọ̀. Yan àwọ̀ ẹ̀yìn àti ọ̀rọ̀ láti inú àwọn ẹ̀yà tí a kọ́ sínú rẹ̀ tàbí tẹ iye hex èyíkéyìí tààrà; olùyan àwọ̀ abínibí àti pápá ọ̀rọ̀ tí a fọwọ́sí ń dúró bára mu.
2. 2
   API Canvas ń ṣe àkíyèsí náà lẹ́sẹ̀kẹsẹ̀

   Ipa React kan ń pe drawPlaceholder() ní ìyípadà kọ̀ọ̀kan. Iṣẹ́ yìí ń lo CanvasRenderingContext2D láti kó onígun mẹ́rin náà pẹ̀lú àwọ̀ ẹ̀yìn, ó lè yà àwọn ìlà agbélébùú aláìlágbára ní 15% opacity, kí ó sì wọn àti kó ọ̀rọ̀ àmì rẹ sí àárín — tí ó ń dín fóńtì kù láifọwọ́kàn títí yóò fi bá 90% ìbú canvas mu.
3. 3
   Gbé jáde gẹ́gẹ́ bí PNG, JPEG, tàbí SVG

   Àwọn gbígbà PNG àti JPEG ń pe canvas.toDataURL(), tí ó ń yí àbájáde base64 padà sí Blob nínú ìrántí, tí ó sì ń dá gbígbà sílẹ̀ — gbogbo rẹ̀ ní ìdáhùn kan náà nínú ìṣe oníṣẹ́ nítorí náà àwọn òfin gbígbà Safari iOS ń bá mu. Gbígbé SVG jáde ń kọ́ ọ̀wọ́ ọ̀rọ̀ SVG tí ó dá dúró fúnra rẹ̀ pẹ̀lú rect tí ó bára mu, àwọn ìlà agbélébùú yíyàn, àti ẹ̀yà ọ̀rọ̀ kan, kí ó sì fi pamọ́ gẹ́gẹ́ bí fáìlì .svg.
4. 4
   Gbígbé àkójọpọ̀ jáde àti àwọn ọ̀nà kánjú dídàkọ

   Bọ́tìnnì 'Gba gbogbo ìṣètò tẹ́lẹ̀' ń kó JSZip wọlé láfẹfẹ, ó ń tún ṣe àwòrán ọ̀kọ̀ọ̀kan lára àwọn ìwọ̀n ìṣètò tẹ́lẹ̀ mọ́kànlá sórí canvas lóde-ìfihàn kan ní lílo iṣẹ́ àwòrán kan náà, ó sì ń kó gbogbo PNGs papọ̀ sí ZIP kan ṣoṣo. Àwọn bọ́tìnnì dàkọ ń mú URL dátà PNG kan, tag img SVG inú-ìlà, tàbí ìkéde CSS background-image jáde fún lílẹ̀ lẹ́sẹ̀kẹsẹ̀ sí kóòdù.

Àwọn Irinṣẹ Tó Jọra