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

Journalist · January 7, 2019

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

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

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

gefard · January 7, 2019

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

Journalist · January 7, 2019

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

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>

gefard · January 7, 2019

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

на

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

Journalist · January 7, 2019

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

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

на

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

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

Sign In

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

5 posts in this topic

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity