Javascript-də ortalama rəngin müəyyən edilməsi
#Step IT Academy tərəfindən təqdim olunur
Gördüyüm bir iş üçün şəkil slayderi düzəltmək lazım idi. Qərar verdik ki, əlaqədar yazıları ortalama rənglərin üzərinə qoyaq. Ortalama rəng mövzusu maraqlı gəldi mənə və bunu daha hansı variantlarla reallaşdırmaq olar deyə bir araşdırma elədim.
Fon
Şəklin ortalama rəngini müəyyən edib arxa fonda tətbiq edirik. Nümunə
Qradient
Ortalama rəng şəklin üst və alt hissələrindən götürülür və mətnin arxasına tətbiq olunur. Şəkil ilə fon arasında qradient var. Yandex Dzen-in tərzidir. Nümunə
Minecraft tərzində qradient - ortalama rəng hissə-hissə müəyyən edilir (horizontal xəttlər ilə). Nümunə
Çərçivə
Şəklin baqeti kimi, ortalama rəng fotonun hər bir tərəfindən ayrı-ayrı götürülür. Nümunə
Kölgə
Müəyyən edilmiş rəng kölgə kimi istifadə olunur. Nümunə
CSS-da elementə bir neçə kölgə vermək olar. Hər tərəf üçün ayrıca rəng müəyyən edib kölgələr tətbiq edək. Nümunə
Video
Öncəki nümunə video üçün dinamika da tətbiq oluna bilər. Nümunə
Ekranın tərəflərini daha böyük hissələrə bölək (30) və onlarda kölgə üçün ortalama rəng müəyyən edək. Philips Ambilight kimi. Nümunə
Mətnli foto
Fotonun üzərinə mətn əlavə edirik və hər bir simvolun altında ortalama rəngi müəyyən edib, onu simvola tətbiq edirik. Nümunə
İstifadəsi
Nümunələrdə ortalama rəng balaca bir «fast-average-color» adlı paket vasitəsi ilə həyata keçirilir. Rəngin hesablanması zamanı şəffaflıq da nəzərə alınır. Süsmaya (default olaraq) görə kvadratlı alqoritm istifadə olunur, çünki adi ortalamada rəng çox tünd ola bilər.
npm i -D fast-average-color
Nümunələr
Yüklənilmiş şəkil, video və canvas-dan ortalama rəngin hesablanması üçün .getColor() metodu istifadə olunur.
<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>
Yüklənmə prosesində olan şəkillər üçün isə — .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>
Fərqli domenlərdən gələn fayllardan istifadə zamanı CORS məsələlərini unutmayın
Linklər:
Paylaş
Bənzər xəbərlər
