Olùyí PNG sí ICO Favicon Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

Ìyípadà náà ń ṣẹlẹ̀ pátápátá nínú aṣàwákiri rẹ ní lílo ẹ̀rọ méjì tí a kọ tààrà sínú irinṣẹ́ yìí: API Canvas láti ṣe ìwọ̀n àti àwòrán férémù àmì kọ̀ọ̀kan, àti encoder binary ICO tí a fi ọwọ́ kọ tí ó ń kó àwọn férémù wọ̀nyí sí fáìlì .ico kan ṣoṣo — kò sí ìwé-ìṣirò tí a gbà wọlé, kò sí fáìlì tí ó kúrò lára ẹ̀rọ rẹ láé.

1. 1
   A kó àwòrán padà sí canvas kan

   A ń kó PNG, JPEG, WebP, tàbí SVG tí o gbé wọlé sínú HTMLImageElement kan tí a sì ń yà á sórí canvas lóde-ìfihàn kan ní ìwọ̀n tí a béèrè kọ̀ọ̀kan (16×16 títí dé 256×256). Canvas náà ń lo ìrọ̀rọ̀ bicubic dídára-gíga tí ó sì ń bọ̀wọ̀ fún àyàn bí-ó-ti-yẹ rẹ: 'contain' ń fi àyè bò àwòrán náà pẹ̀lú àyè-tí-a-lè-rí-nípasẹ̀ tàbí àwọ̀, nígbà tí 'cover' ń gé onígun mẹ́rin àárín-gbùngbùn kan láti orísun náà.
2. 2
   A gbé férémù kọ̀ọ̀kan jáde gẹ́gẹ́ bí byte PNG

   canvas.toBlob('image/png') aṣàwákiri tí a kọ́ sínú rẹ̀ ń ṣe àmúlò férémù tí a ṣe ìwọ̀n sí kọ̀ọ̀kan sí PNG tí kò pàdánù. Àwọn byte gan-an wọ̀nyí ni ohun tí a fi bọ̀ sínú ìkàwé .ico náà — àwọn aṣàwákiri òde òní àti Windows ń mú PNG-nínú-ICO abínibí, tí ó ń pa ìwọ̀n fáìlì mọ́ kékeré ju ìrísí BMP àgbà.
3. 3
   A kó binary ICO papọ̀ nínú ìrántí

   Encoder tí a fi ọwọ́ kọ ń kọ́ ìtòlẹ́sẹẹsẹ fáìlì .ico láti ìbẹ̀rẹ̀pẹ̀pẹ̀ ní lílo DataView: àkọlé ICONDIR byte-6 kan ń kéde iye àwòrán, tí ó tẹ̀lé pẹ̀lú àkọsílẹ̀ ìkàwé byte-16 fún ìwọ̀n kọ̀ọ̀kan (tí ó ń kọ ìbú, gíga, ìjìnlẹ̀-bit, gígùn byte, àti ìdásí dátà), kí ó sì tẹ̀lé pẹ̀lú gbogbo àwọn ìjẹ́ PNG tí a so pọ̀ ní ìtòlẹ́sẹẹsẹ. Kò sí ìwé-ìṣirò ẹnì kẹta tí ó kàn.
4. 4
   Àkíyèsí tí a fihàn, fáìlì tí a gbà

   Kí a tó fi gbígbà náà hàn, UI ń ṣe àkíyèsí tí ó bá pixel mu ti ìwọ̀n kọ̀ọ̀kan tí a kó papọ̀ lòdì sí ẹ̀yìn checkerboard nítorí náà o lè fọwọ́sí àìrí-nípasẹ̀ kí o tó fi pamọ́. A ń fún àkànṣe Blob tí a kó papọ̀ ní ẹ̀rọ gbígbà aṣàwákiri gẹ́gẹ́ bí 'favicon.ico'.

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