Kyauta Mai Canza PNG zuwa ICO Favicon

Yadda Yake Aiki

Canjawar tana gudana gaba ɗaya a burauzarka ta amfani da hanyoyi biyu da aka rubuta kai tsaye a wannan kayan aikin: Canvas API don girmata da zana kowace firam na alama, da wani mai ɓoye binary na ICO da aka rubuta da hannu wanda yake lulluɓe waɗannan firam zuwa fayil na .ico guda ɗaya — babu ɗakin karatu da ake sauke shi, kuma babu fayil da yake barin na'urarka a kowane lokaci.

1. 1
   Ana ɓoye hoton zuwa canvas

   Ana loda PNG, JPEG, WebP, ko SVG ɗinka da aka loda zuwa wani HTMLImageElement kuma ana zana shi zuwa wani canvas a wajen allo a kowace girman da aka bukata (16×16 har zuwa 256×256). Canvas yana amfani da santsi na bicubic mai inganci kuma yana bin zaɓinka: 'contain' yana yin letterbox na hoton da padding mai bayyane ko mai launi, yayin da 'cover' yake yanke murabba'i mai tsaka daga tushen.
2. 2
   An fitar da kowace firam a matsayin bytes na PNG

   canvas.toBlob('image/png') da aka gina na burauza yana ɓoye kowace firam da aka girmata zuwa PNG marar-asara. Waɗannan bytes danye su ne abin da ake lulluɓe a cikin akwatin .ico — burauza na zamani da Windows suna sarrafa PNG-in-ICO na asali, wanda yake kiyaye girman fayil ƙarami fiye da tsohon tsarin BMP.
3. 3
   An haɗa binary na ICO a ƙwaƙwalwa

   Wani mai ɓoye da aka rubuta da hannu yana gina tsarin fayil na .ico daga farko ta amfani da DataView: wani kanun labari na ICONDIR na byte 6 yana bayyana adadin hoto, sai wani shigarwar directory na byte 16 don kowace girma (yana rubuta fadi, tsayi, zurfin-bit, tsawon byte, da matsayin bayanai), sannan dukkan payloads na PNG an haɗa su a jere. Babu ɗakin karatu na bangare na uku da abin ya shafa.
4. 4
   An nuna dubawa, an sauke fayil

   Kafin bayar da saukewa, UI yana zana dubawa mai daidaito na pixel na kowace girma da aka lulluɓe a kan bango mai murabba'i-murabba'i don ka tabbatar da bayyanuwa kafin ajiyewa. Ana ba Blob da aka haɗa ga hanyar saukewa ta burauza a matsayin 'favicon.ico'.

Kayan Aiki Masu Alaƙa