Olùyí àti Olùyíká Àwòrán Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

Yíyí, yíyí-padà, àti àtúnṣe igun níbí ń ṣẹlẹ̀ pátápátá nínú aṣàwákiri rẹ ní lílo API Canvas HTML — a kì í fi fáìlì kankan ránṣẹ́ sí sáfà kan láé. Irinṣẹ́ náà ń yà àwòrán rẹ sórí canvas lóde-ìfihàn ní igun àti ìwọ̀n tí a yàn, kí ó sì ṣe àmúlò àbájáde náà sí JPEG, PNG, tàbí WebP ní lílo codec aṣàwákiri fúnrarẹ̀.

1. 1
   A pín àwòrán ládùúgbò

   A ń kó fáìlì JPEG, PNG, tàbí WebP rẹ wọlé sí HTMLImageElement kan nípasẹ̀ URL ohun ládùúgbò — ìtọ́ka ìrántí aṣàwákiri kan tí kì í kúrò lára ẹ̀rọ rẹ láé. A ń ka àwọn àbùkù pixel gidi tààrà láti inú bitmap tí a pín náà.
2. 2
   A fi ìyípadà canvas sílo

   A ń ṣe ìwọ̀n canvas lóde-ìfihàn kan láti bára mu ààlà onígun-mẹ́rin-ìyí (ìbú·cos + gíga·sin fún ìhà kọ̀ọ̀kan). A sì ń gbé àkànṣe Canvas 2D náà sí àárín, a ń yí i padà ní igun tí a yàn ní radians, a sì ń fẹ̀ ẹ́ ní -1 lórí ìhà onídojúkọ tàbí ìdúró fún yíyí-padà — gbogbo àwọn iṣẹ́ ctx.rotate / ctx.scale déédéé láìsí ìwé-ìṣirò ìta.
3. 3
   Gígé aládàáṣe ń gé àwọn igun kúrò (yíyàn)

   Fún àwọn yíyí tí kì í ṣe igun-ọ̀tún, iṣẹ́ gẹ́ọ́mẹ́tì tí a fi ọwọ́ kọ — largestInnerRect — ń ṣírò onígun mẹ́rin tí ó tóbi jùlọ tí a ṣe déédéé pẹ̀lú àṣàrò ìpilẹ̀ṣẹ̀ tí ó bá ààlà onígun-mẹ́rin-ìyí náà mu, nítorí náà àwọn igun òfìfo onígun-mẹ́ta náà ni a yọ kúrò láìyí àwòrán náà padà.
4. 4
   Codec aṣàwákiri ń ṣe àmúlò àbájáde náà

   canvas.toBlob() ń fi dátà pixel náà sí encoder àwòrán aṣàwákiri tí a kọ́ sínú rẹ̀, tí ó ń mú JPEG (pẹ̀lú dídára àti àwọ̀ ẹ̀yìn tí a lè yàn fún àwọn igun tí kò rí), PNG, tàbí Blob WebP jáde tí o gbà tààrà.

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