Jump to content
Journalist

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

Recommended Posts

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

 

<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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...