💾 🛀 🛷 हम यैंडेक्स ब्राउज़र की शैली में साइटों का पूर्वावलोकन करते हैं 👨🏻‍💼 ♀️ 🏐

लगभग दो महीने बीत चुके हैं जब Yandex ने कुछ उपयोगकर्ताओं को एक नए उत्पाद - Yandex Browser से प्रसन्न किया। इस क्षेत्र (क्रोम और फ़ायरफ़ॉक्स) में उत्पादों के विकास की अविश्वसनीय गतिशीलता के बावजूद, Yandex अपने ब्राउज़र में कई नए विचारों को लाने में कामयाब रहा।

इस ब्राउज़र की सभी विशेषताओं में से, मुझे "स्पीड डायल" में वेबसाइट छवियों के बारे में उनके डिजाइन के फैसले से सबसे अधिक धक्का लगा। लोग अपनी आंखों से प्यार करते हैं, और इसलिए उनके नए टैब में एक खाली सफेद पृष्ठ नहीं, बल्कि रंगीन चित्र देखना अच्छा लगता है। केवल परेशानी यह है कि व्यक्तिगत रूप से, सबसे अधिक बार, मैं इस तस्वीर के नीचे या फ़ेविकॉन पर हस्ताक्षर को देखता हूं, क्योंकि साइट के स्क्रीनशॉट से इसे पहचानना बहुत मुश्किल हो सकता है। यैंडेक्स डिजाइनरों ने, मेरी राय में, इस समस्या को बहुत ही सुरुचिपूर्ण ढंग से हल किया। इस पोस्ट में हम देखेंगे कि ग्राहक के इस विचार को कैसे लागू किया जाए।

विचार का सार इस प्रकार है:

फ़ेविकॉन साइट प्राप्त करें
फ़ेविकॉन में प्रमुख रंग को परिभाषित करें
एक प्रमुख रंग के साथ एक आयत बनाएं और उसमें फेविकॉन चिपकाएँ।
अधिक आकर्षण के लिए, ऊपर से एक ढाल लगाया जाता है।

यह वास्तव में बहुत सरल लगता है। यहाँ सबसे कठिन बिंदु फ़ेविकॉन में प्रमुख रंग का निर्धारण है। ऐसा करने के लिए, हमें तीन समस्याओं को हल करने की आवश्यकता है:

फेविकॉन प्राप्त करें।
छवि में प्रत्येक पिक्सेल के मूल्य तक पहुँचें।
प्रमुख रंग निर्धारित करने के लिए एल्गोरिथ्म पर निर्णय लें।

फ़ेविकॉन हो रही है

फ़ेविकॉन प्राप्त करने के लिए, आप या तो सर्वर पर एक निश्चित हैंडलर लिख सकते हैं, जो डोमेन द्वारा फ़ेविकॉन को खोजेगा और लौटाएगा, या आप देख सकते हैं कि यैंडेक्स ब्राउज़र कैसे करता है ... और वह इसी नाम की यैंडेक्स सेवा के लिए अनुरोध करता है। उदाहरण के लिए, यह प्रश्न:

GET favicon.yandex.net/favicon/habrahabr.ru

यह इस तरह की तस्वीर यहां लौटाएगा:

छवि पिक्सेल पहुंच

दूसरे कार्य के बारे में - ग्राहक की ओर से छवि के पिक्सेल मूल्यों तक पहुंचने का एकमात्र तरीका तत्व का उपयोग करना है। कैनवास में छवि को लोड करके हम एक मनमाना पिक्सेल का मूल्य प्राप्त कर सकते हैं।

हालाँकि, कुछ समस्या है। कैनवास टैग का उपयोग करके छवि पिक्सल तक पहुंचना केवल उन छवियों के लिए संभव है जो उसी डोमेन से लोड होते हैं जो पृष्ठ उन्हें संसाधित करता है (क्रॉस-डोमेन ब्राउज़र नीति काम करता है)।

इस प्रकार, फ़ेविकॉन में प्रमुख रंग खोजने के लिए कैनवास तत्व का उपयोग करने के लिए, आपको अपने सर्वर पर एक प्रॉक्सी को व्यवस्थित करने की आवश्यकता है जो फ़ेविकॉन डाउनलोड करेगा (उदाहरण के लिए, favicon.yandex.ru सेवा से) और इसे अपने पृष्ठ पर वापस लौटाएं।

इस संबंध में, ग्राहक पक्ष, अलस पर विशुद्ध रूप से साइटों के ऐसे पूर्वावलोकन के कार्यान्वयन से काम नहीं चलेगा। वास्तव में, चूंकि हमें अभी भी छवियों के लिए प्रॉक्सी के रूप में एक सर्वर की आवश्यकता है, इसलिए हम प्रमुख रंग की गणना सर्वर पर स्थानांतरित कर सकते हैं, पृष्ठ पर वापस आइकन नहीं, बल्कि एक रंग प्राप्त कर सकते हैं। हालांकि, सर्वर साइड पर इसे कैसे लागू किया जाए, यह इतना दिलचस्प और बहुत विषम नहीं है, क्योंकि सर्वर (पायथन, पीएचपी, जावा) पर इस्तेमाल की जाने वाली भाषा के आधार पर, कार्यान्वयन अलग होगा। इसलिए, हम कैनवास तत्व का उपयोग करके क्लाइंट पर ऐसा करने के तरीके को देखेंगे।

प्रमुख रंग एल्गोरिथ्म

एक छवि के प्रमुख रंग का निर्धारण करने के लिए कई एल्गोरिदम हैं। इन एल्गोरिदम का सामान्य विचार निम्नानुसार है। प्रत्येक छवि पिक्सेल चार नंबर R, G, B, A. का प्रतिनिधित्व करता है। हम सभी पिक्सेल के माध्यम से जाते हैं और एक विशेष तरीके से उनके घटकों का विश्लेषण करते हैं:

 //   canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); //   canvas  favicon ctx.drawImage( faviconImage, 0, 0, 18, 18); //     var data = ctx.getImageData(0, 0, 18, 18); //    for ( i = 0; i<data.data.length; i=i+4 ) { rgb = {}; rgb.r = data.data[i]; rgb.g = data.data[i + 1]; rgb.b = data.data[i + 2]; }

हमारे मामले में, लागू करते समय, दो विशेषताओं पर विचार किया जाना चाहिए:

I. कई फ़ेविकॉन्स में पारदर्शी पिक्सेल होते हैं, जो जब कैनवास तत्व को प्रदान किए जाते हैं तो उन्हें आरजीबीए (0, 0, 0, 0) के रूप में दर्शाया जाता है। चूंकि हम अल्फा चैनल को नजरअंदाज करते हैं, हमारे लिए, ये पिक्सेल काले (# 000000) की तरह दिखेंगे, जो सच नहीं है। इसे ठीक करने के लिए, बस उस पर एक फ़ेविकॉन खींचने से पहले कैनवास को सफेद पेंट करें।

 //  canvas   ctx.fillStyle = 'rgb(255, 255, 255)'; ctx.fillRect(0, 0, 18, 18); //  favicon ctx.drawImage( faviconImage, 0, 0, 18, 18);

द्वितीय। चूंकि विचार यह है कि फ़ेविकॉन सफेद सर्कल में फिट होगा, तो अगर छवि में प्रमुख रंग सफेद है, तो हम या तो सर्कल या हमारे तत्व की सीमाओं को नहीं देखेंगे। इससे बचने के लिए, हम बस प्रत्येक एल्गोरिदम में सफेद पिक्सेल को अनदेखा करेंगे।

मैं उनकी जटिलता को बढ़ाकर प्रमुख रंग निर्धारित करने के लिए तीन अलग-अलग एल्गोरिदम पर विचार करूंगा।

एल्गोरिथ्म 1. औसत रंग मूल्य

पहला और सरल एल्गोरिथम इस प्रकार है। हम बस सभी पिक्सेल के माध्यम से जाते हैं और इसी रंगों के अंकगणितीय माध्य की गणना करते हैं। कोड के साथ लेख को अव्यवस्थित नहीं करने के लिए - सभी स्रोत गिहब पर उपलब्ध हैं, मैं केवल उनके काम के परिणाम प्रदर्शित करूंगा:

एल्गोरिथम 2. यूक्लिडियन दूरी

यह एल्गोरिथ्म थोड़ा अधिक जटिल है और इसमें निम्नलिखित शामिल हैं। प्रत्येक रंग तीन आयामी अंतरिक्ष (आर, जी, बी) में एक वेक्टर है। हम प्रत्येक पिक्सेल के माध्यम से जाते हैं और अन्य सभी पिक्सेल के लिए इसकी दूरी पर विचार करते हैं (दो वैक्टर के बीच यूक्लिडियन दूरी)। फिर हम उस पिक्सेल की तलाश करते हैं जो अन्य सभी के सबसे करीब है। इस पिक्सेल का रंग हमारा वांछित रंग है। यहां यह ध्यान दिया जाना चाहिए कि यह एल्गोरिथ्म, पिछले एक के विपरीत, एक नया रंग नहीं बनाता है, लेकिन केवल इस छवि में मौजूदा लोगों से चयन करता है।

एल्गोरिथम 3. k- साधनों को क्लस्टर करने की विधि

इस एल्गोरिथ्म का सार इस प्रकार है। बेतरतीब ढंग से विभिन्न रंगों की छवि के k पिक्सल (केंद्र) का चयन करता है। हम सभी अन्य पिक्सेल के माध्यम से जाते हैं और उनमें से प्रत्येक को एक दूसरे के निकटता के आधार पर केंद्रों में से एक में असाइन करते हैं (हम यूक्लिडियन दूरी को एल्गोरिथ्म 2 के रूप में मानते हैं)। फिर हम केंद्रों को पुनर्गणना करते हैं - हम उनके लिए निर्धारित सभी पिक्सेल के बीच औसत के बराबर मूल्य निर्धारित करते हैं (जैसा कि एल्गोरिथ्म 1 में)। हम फिर से सभी पिक्सेल के माध्यम से जाते हैं और उन्हें नए केंद्रों में वितरित करते हैं। हम यह सब तब तक करते हैं जब तक कि केंद्रों का मूल्य बदल नहीं जाता। आप जो रंग चाहते हैं, वह सबसे अधिक पिक्सेल के साथ केंद्र मूल्य होगा। यह ध्यान दिया जाना चाहिए कि यह विधि क्रोम ब्राउज़र में उसी उद्देश्य के लिए उपयोग की जाती है। K = 3 के लिए उनके कार्य का परिणाम इस प्रकार है:

K = 5 के लिए:

(पैरामीटर k के शेष मानों के लिए, परिणाम इतने सूचक नहीं हैं)

निष्कर्ष

इनमें से कौन सा एल्गोरिदम बेहतर है, इस पर सवाल बहस का मुद्दा है।

औसत एल्गोरिथ्म अविश्वसनीय रूप से सरल है और आम तौर पर काम करता है, लेकिन एक बहुत गंदा परिणाम दे सकता है।
यूक्लिडियन दूरी के माध्यम से गणना, मेरे स्वाद के लिए, एक बहुत अच्छा परिणाम देता है और इसे लागू करना आसान है।
क्लस्टरिंग एल्गोरिथ्म सबसे जटिल है। यह सबसे ज्वलंत छवि देता है और सबसे अधिक गणनाओं की आवश्यकता होती है।

पीएस गितुब-उपयोगकर्ता स्थैतिक-प्रयोगशाला ने एक और एल्गोरिथ्म का प्रस्ताव किया और कार्यान्वित किया, "इसके विपरीत YUV से अधिक," जो बहुत अच्छा परिणाम देता है।

आपके ब्राउज़र में एक उदाहरण चलाया जा सकता है (बेस 64 में फेविकॉन): DEMO
यहाँ स्रोत: github

हम यैंडेक्स ब्राउज़र की शैली में साइटों का पूर्वावलोकन करते हैं