دروستکەری فاڤیکۆنی بەخۆڕایی

چۆن کار دەکات

ئەم ئامرازە هەر PNG، JPEG، WebP، یان SVGیەک دەگۆڕێت بۆ کۆمەڵگایەکی تەواوی فاڤیکۆن — .icoی فرە-قەبارە، ئایکۆنی Apple touch، ئایکۆنی Android/PWA، مانیفێستێکی وێب، و پارچەیەکی HTMLی ئامادەی لکاندن — تەواو لەناو وێبگەڕەکەتدا بە بەکارهێنانی APIی Canvas و JSZip. هیچ شتێک بار ناکرێت؛ هەموو کێشان و کۆکردنەوەی فایل بەشێوەیەکی ناوخۆیی ڕوودەدات.

1. 1
   Canvas وێنەکەت دووبارە پیوان دەکات

   وێبگەڕ وێنەی سەرچاوەکەت دەکێشێت لەسەر توخمی Canvasی HTMLی دەرەوەی شاشە لە هەر قەبارەیەکی پێویستدا (16، 32، 48، 180، 192، و 512 px). SVGی بەبێ تایبەتمەندی ڕوونی پان/بەرزی سەرەتا بە DOMParser و XMLSerializer ستاندارد دەکرێن بۆیە Firefox و Chrome هەمان دەرچوونی پیکسێل دروست دەکەن لەبری Canvasێکی بەتاڵ.
2. 2
   کۆدکەرێکی ICOی دەستنووس فایلی .ico کۆدەکات

   تۆماری ICOی بچووک (16، 32، 48 پیکسێل) وەک بیتمابی خاوی BGRAی 32-بیتی DIB کۆددەکرێن — BITMAPINFOHEADER پێکەوە لەگەڵ ڕیزی XORی خوارەوە-بۆ-سەرەوە و ماسکی AND 1bpp — چونکە پێکهاتەکانی شێڵی Windows پێویستیان بە فۆرماتی DIBی نەکۆکراوەیە لەو قەبارانەدا. ئامرازەکە سەرپەڕی دیرێکتۆری ICO دەنووسێت و تۆمارەکان بەیەکەوە دەبەستێت تەواو بە DataView و Uint8Array، بەبێ کتێبخانەیەکی دەرەکی ICO.
3. 3
   دەرچوونی PNG لە ڕێگای canvas.toBlobەوە دروستدەکرێت

   هەر جۆرێکی PNG (favicon-16x16، favicon-32x32، apple-touch-icon-180x180، android-chrome-192x192، android-chrome-512x512) بە بانگکردنی canvas.toBlob لەگەڵ 'image/png' دەگیردرێت، ناردنی کۆدکردنی بەبێ-زیان بۆ ئەنجینی وێنەی سەرەکی وێبگەڕ. بۆشایی ئارەزوومەندانە، ڕەنگی پاشبنەما، و بڕینی شێواز (چوارگۆشە، خڕکراو، یان بازنە) پێش گرتن لەسەر context ی canvas جێبەجێدەکرێن.
4. 4
   JSZip هەموو شتێک بۆ یەک داگرتن کۆدەکاتەوە

   JSZip هەموو فایلی دروستکراو کۆدەکاتەوە — favicon.ico، پێنج PNGەکان، site.webmanifestیەک لەگەڵ ناوی ئەپەکەت، و favicon-snippet.htmlـیک لەگەڵ تاگی <link> ی دروست — بۆ تاک بلۆبی .zip کە بەخۆکار بۆ ئامێرەکەت دادەگیرێت.

ئامرازە پەیوەندیدارەکان