Табдилдиҳандаи фавикони PNG ба ICO-и ройгон

Чӣ тавр он кор мекунад

Табдил пурра дар браузери шумо бо ду механизме ки бевосита дар ин абзор навишта шудаанд кор мекунад: API-и Canvas барои миқёсдиҳӣ ва тасвиркунии ҳар фрейми нишона, ва рамзгузори дуии ICO-и дастнавис, ки он фреймҳоро ба файли ягонаи .ico мебандад — ягон китобхона боргирӣ намешавад, ва ягон файл ҳаргиз дастгоҳатонро тарк намекунад.

1. 1
   Тасвир ба canvas рамзкушоӣ карда мешавад

   PNG, JPEG, WebP ё SVG-и боркардаи шумо ба HTMLImageElement бор карда, ба canvas-и берун-аз-экран дар ҳар андозаи дархостшуда (16×16 то 256×256) кашида мешавад. Canvas ҳамворшавии бикубии баландсифатро истифода мебарад ва интихоби мутобиқати шуморо эҳтиром мекунад: 'contain' тасвирро бо фосилаи шаффоф ё рангин ҷустуҷӯ мекунад, дар ҳоле ки 'cover' мураббаъи марказонидашударо аз манбаъ мебурад.
2. 2
   Ҳар фрейм ҳамчун байтҳои PNG содир мешавад

   canvas.toBlob('image/png')-и дарунсохти браузер ҳар фрейми миқёсшударо ба PNG-и бидуни талафот рамзгузорӣ мекунад. Ин байтҳои хом чизест, ки дар дохили контейнери .ico дохил карда мешавад — браузерҳо ва Windows-и муосир PNG-дар-ICO-ро дарунсохт идора мекунанд, ки андозаи файлро аз формати кӯҳнаи бар-пойаи BMP хурдтар нигоҳ медорад.
3. 3
   Дуии ICO дар хотира ҷамъ карда мешавад

   Рамзгузори дастнавис сохтори файли .ico-ро аз сифр бо истифодаи DataView месозад: сарлавҳаи ICONDIR-и 6-байта шумораи тасвирро эълом мекунад, ки пас аз он вурудии директориаи 16-байтагӣ барои ҳар андоза (бар, баландӣ, умқи бит, дарозии байт ва гузаришти маълумотро сабт мекунад) меояд, сипас тамоми пейлодҳои PNG пайдарпай пайваст карда мешаванд. Ягон китобхонаи тарафи сеюм дахл надорад.
4. 4
   Пешнамоиш нишон дода мешавад, файл боргирӣ мешавад

   Пеш аз пешниҳод кардани боргирӣ, интерфейс пешнамоиши пиксел-дурусти ҳар андозаи бастабандишударо дар муқобили заминаи шоҳмот тасвир мекунад, то шаффофиятро пеш аз захира кардан санҷед. Blob-и ҷамъшуда ба механизми боргирии браузер ҳамчун 'favicon.ico' супорида мешавад.

Абзорҳои марбут