Journalist

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

5 posts in this topic

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

 

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

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

Share this post


Link to post
Share on other sites
<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>

 

Share this post


Link to post
Share on other sites

Спасибо! Но с этим вариантом вообще ничего не работает 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>

 

 

Share this post


Link to post
Share on other sites

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

на

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

Share this post


Link to post
Share on other sites
23 часа назад, gefard сказал:

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

на

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.