🙆🏾 🛂 ♌️ जावास्क्रिप्ट मध्यम रंग 🏅 👨🏾‍🔧 👩‍🏫

फलों का औसत रंग

काम पर, मैंने तस्वीरों का एक पत्ता किया। पाठ के साथ, यह फोटो के औसत रंग पर लगाने का निर्णय लिया गया। मध्यम रंग के विषय में दिलचस्पी है, और मैंने फैसला किया
देखें कि आप लेआउट में और कौन से विकल्प इस्तेमाल कर सकते हैं।

पृष्ठभूमि

हम फोटो के औसत रंग की गणना करते हैं और पृष्ठभूमि का रंग निर्धारित करते हैं। उदाहरण

ढाल

औसत रंग की गणना तस्वीर के ऊपर या नीचे की जाती है और इसका उपयोग पाठ के लिए पृष्ठभूमि में किया जाता है। एक सहज ढाल छवि और सब्सट्रेट के बीच सेट है। Yandex.Zen शैली। उदाहरण

Minecraft- शैली ढाल - औसत रंग की गणना भागों (क्षैतिज पट्टियों) में की जाती है। उदाहरण

ढांचा

एक तस्वीर में एक बैगूएट की तरह, फोटो के प्रत्येक पक्ष के लिए औसत रंग अलग-अलग गणना की जाती है।
उदाहरण

छाया

गिरी हुई छाया के रंग को निर्धारित करने के लिए परिकलित औसत रंग का उपयोग किया जाता है। उदाहरण

CSS में, एक तत्व में कई छाया हो सकते हैं। फोटो के प्रत्येक पक्ष के लिए, औसत रंग की गणना करें और एक अलग छाया निर्धारित करें। उदाहरण

वीडियो

पिछला उदाहरण डायनेमिक्स से वीडियो में लागू होता है। उदाहरण

स्क्रीन के किनारों को बड़ी संख्या में भागों (30) में विभाजित करें, जिसमें हम फिलिप्स छाया की तरह, कास्ट छाया के लिए औसत रंग की गणना करते हैं। उदाहरण

टेक्स्ट फोटो

हम फोटो को पाठ के साथ भरते हैं, प्रत्येक प्रतीक के तहत हम औसत रंग की गणना करते हैं और इसे प्रतीक पर लागू करते हैं। उदाहरण

के उपयोग

उदाहरणों में औसत रंग की गणना छोटे तेज-औसत-रंग पैकेज का उपयोग करके की जाती है। रंग की गणना करते समय, पारदर्शिता को ध्यान में रखा जाता है। डिफ़ॉल्ट रूप से, एक द्विघात एल्गोरिथ्म का उपयोग किया जाता है, क्योंकि सरल औसत के साथ, रंग गहरा हो जाता है ।

npm i -D fast-average-color

उदाहरण

अपलोड की गई तस्वीरों, वीडियो और कैनवास से औसत रंग प्राप्त करने के लिए .getColor () विधि का उपयोग किया जाता है:

 <html> <body> ... <div class="image-container"> <img src="image.png" /> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> <script src="https://unpkg.com/fast-average-color/dist/index.min.js"></script> <script> window.addEventListener('load', function() { var fac = new FastAverageColor(), container = document.querySelector('.image-container'), color = fac.getColor(container.querySelector('img')); container.style.backgroundColor = color.rgba; container.style.color = color.isDark ? '#fff' : '#000'; console.log(color); // { // error: null, // rgb: 'rgb(255, 0, 0)', // rgba: 'rgba(255, 0, 0, 1)', // hex: '#ff0000', // hexa: '#ff0000ff', // value: [255, 0, 0, 255], // isDark: true, // isLight: false // } }, false); </script> </body> </html>

और उन चित्रों के लिए जो लोड करने की प्रक्रिया में हैं - .getColorAsync () :

 <html> <body> ... <div class="image-container"> <img src="image.png" /> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> <script src="https://unpkg.com/fast-average-color/dist/index.min.js"></script> <script> var fac = new FastAverageColor(), container = document.querySelector('.image-container'); fac.getColorAsync(container.querySelector('img'), function(color) { container.style.backgroundColor = color.rgba; container.style.color = color.isDark ? '#fff' : '#000'; console.log(color); // { // error: null, // rgb: 'rgb(255, 0, 0)', // rgba: 'rgba(255, 0, 0, 1)', // hex: '#ff0000', // hexa: '#ff0000ff', // value: [255, 0, 0, 255], // isDark: true, // isLight: false // } }); </script> </body> </html>

विभिन्न डोमेन के चित्रों और वीडियो के लिए, CORS के बारे में मत भूलना।

संदर्भ:

जावास्क्रिप्ट मध्यम रंग