Как изменить цвет фона div по среднему цвету из картинки?

Question

[Артем Гартунг]

JS код

const getAverageColor = (img) => {
  
			const max = 10;
			const {naturalWidth: iw, naturalHeight: ih} = img;
			const ctx = document.createElement`canvas`.getContext`2d`; 
			const sr = Math.min(max / iw, max / ih);
			const w = Math.ceil(iw * sr);
			const h = Math.ceil(ih * sr);
			const a = w * h;
		  
			img.crossOrigin = 1;
			ctx.canvas.width = w;
			ctx.canvas.height = h;
			ctx.drawImage(img, 0, 0, w, h);
		  
			const data = ctx.getImageData(0, 0, w, h).data;
			let r = g = b = 0;
		  
		  	for (let i=0; i<data.length; i+=4) {
		    	r += data[i];
		    	g += data[i+1];
		    	b += data[i+2];
		  	}

		  	r = ~~(r/a);
		  	g = ~~(g/a);
		  	b = ~~(b/a);

		  	return {r, g, b};
		};

		const setBgFromAverage = (img) => {
	  		img.addEventListener("load", () => {
	    	const {r,g,b} = getAverageColor(img);
	    	img.style.backgroundColor = `rgb(${r},${g},${b})`;
	  	});
	};

	document.querySelectorAll('#lots').forEach(setBgFromAverage);

html код

<div class="lots">
		<div class="lots-img">
			<img id="lots" src="../img/lots/1.webp">
		</div>
		<div class="lots-money">
			<h1>300₽</h1>
			<span>/ 1 шт.</span>
		</div>
		<div class="lots-name">M.2 NVMe PCI-E4.0/3.0</div>
		<div class="lots-transfer"><img src="../img/icons/avito.svg"> Avito</div>
		<div class="white-button">Снять с продажи</div>
	</div>

	<div class="lots">
		<div class="lots-img">
			<img id="lots" src="../img/lots/2.png">
		</div>
		<div class="lots-money">
			<h1>2500₽</h1>
			<span>/ 1 шт.</span>
		</div>
		<div class="lots-name">Стабилизатор напряжения Ресанта С500</div>
		<div class="lots-transfer"><img src="../img/icons/avito.svg"> Avito</div>
		<div class="white-button">Снять с продажи</div>
	</div>

Код работает но меняет цвет у img а нужно в div.lots как этого добиться?

Comments

[Ankhena]

Код работает но меняет цвет у img

Вы написали менять у img, скрипт так и делает.
img.style.backgroundColor = `rgb(${r},${g},${b})`;
Поменяйте на того, кого нужно покрасить.

[Артем Гартунг]

Ankhena, div.lots здесь менять цвет) а сейчас да он у img меняет

[Ankhena]

Артем Гартунг, javascript найти родителя

[Артем Гартунг]

Да, спасибо, получилось сделать) может кому пригодится

let parents = img.closest('.lots');
parents.style.backgroundColor = `rgb(${r},${g},${b},0.12)`;

[Aragorn]

Артем Гартунг, сделайте ответом и отметьте решением

[ImagineTables]

Картинки рантаймовые (подгружаемые динамически) или дизайнтаймовые (известные заранее)? В последнем случае я бы написал плагин к LESS, чтобы можно было писать:

.my-div
{
    .bg-color-from-image('\images\my-image.png');
}

и получать на выходе:

.my-div
{
    background-color: #af360f;
}

Answer 1

[Артем Гартунг]

Да, спасибо, получилось сделать) может кому пригодится

let parents = img.closest('.lots');
parents.style.backgroundColor = `rgb(${r},${g},${b},0.12)`;