Journalist

Создание цвета фона под средний цвет картинки

Автор Journalist,

5 сообщений в этой теме

Опубликовано: · Жалоба

Привет всем! Разбираюсь с одним скрптом, который делает фон под средний цвет картинки:

  

<html>
<body>
  
    <div class="image-container">
        <img src="tomato.jpg" />
        <div>
            Philip Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
	
	 <div class="image-container">
        <img src="blue.jpg" />
        <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>

Всё работает, но как вставляю второй контейнер с картинкой, цвет ему не задаёт, как мне подправит код?

Поделиться сообщением

Ссылка на сообщение
Поделиться на других сайтах

Опубликовано: · Жалоба 

<script>
        window.addEventListener('load', function() {
		
            var fac = new FastAverageColor();
            containers = document.querySelector('.image-container');
			
			for (var i = 0; i < containers.length; i++) {
				
				container = containers[i];
				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>

 

Поделиться сообщением

Ссылка на сообщение
Поделиться на других сайтах

Опубликовано: · Жалоба

Спасибо! Но с этим вариантом вообще ничего не работает B)

23 часа назад, gefard сказал: 

<script>
        window.addEventListener('load', function() {
		
            var fac = new FastAverageColor();
            containers = document.querySelector('.image-container');
			
			for (var i = 0; i < containers.length; i++) {
				
				container = containers[i];
				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>

 

 

Поделиться сообщением

Ссылка на сообщение
Поделиться на других сайтах

Опубликовано: · Жалоба

сорян, замени containers = document.querySelector('.image-container');

на

containers = document.querySelectorAll('.image-container');

Поделиться сообщением

Ссылка на сообщение
Поделиться на других сайтах

Опубликовано: · Жалоба

23 часа назад, gefard сказал:

сорян, замени containers = document.querySelector('.image-container');

на

containers = document.querySelectorAll('.image-container');

Спасибо! Работает )

Поделиться сообщением

Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас
Перейти к списку тем Сервисы, программы и скрипты

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу