Javascript-də ortalama rəngin müəyyən edilməsi

Javascript-də ortalama rəngin müəyyən edilməsi

Code-News
17.01.2019 PAYLAŞIM
TECHNOTE @technote TECHNOTE logo icon

Bənzər xəbər


#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:

Qeyd: Şərhlərdə nalayiq ifadələr işlətmək, reklam xarakterli mətn paylaşmaq qadağandır.

Şərh yoxdur

Şərh yazmaq üçün daxil olun


DAHA ÇOX


2020-ci ildə məlumatların vizualizasiyası üçün aktual olacaq Top-8 JavaScript ki..

JavaScript-də məlumatları daha gözəl şəkildə təqdim etmək lazımdır?


Microsoft bu il olmuş qeyri adi fişinq kiberhücumlarından danışdı

Bir neçə müddət bundan öncə isə Microsoft şirkəti kiberhücumlar və malware-lar üzrə trendləri əks et..


Microsoft Windows-da 0-day boşluğu da daxil olmaqla 7 kritik sistem boşluğu arad..

Microsoft şirkəti bu ay təqdim etmiş olduğu yenilənmələr ilə öz sistemlərində 36 boşluğu aradan qald..


Microsoft Teams platformasının Linux versiyası təqdim edildi

Microsoft şirkəti Microsoft Teams platformasının Linux versiyasını təqdim edib.


OpenBSD-də 4 ciddi sistem boşluğu aşkar edilib

OpenBSD-də 4 ciddi sistem boşluğu aşkar edilərək aradan qaldrılıb.


Sadə tətbiqlərin müxtəlif proqramlaşdırma dillərindəki test nəticələri təqdim ed..

Assembler x86_64-də HeavyThing adlı azad kitabxananı reallaşdırmış müəllif Jeff Marrison “Assembler-..

×