Волшебство JS: цвет фона блока исходя из картинки в нем

<script>
// Функция для извлечения доминирующего цвета из изображения
function getDominantColor(img) {
 const canvas = document.createElement('canvas');
 const ctx = canvas.getContext('2d');
 canvas.width = 1;
 canvas.height = 1;

 // Рисуем изображение на canvas 1x1 пикселя (браузер усреднит цвета)
 ctx.drawImage(img, 0, 0, 1, 1);

 // Получаем цвет первого (и единственного) пикселя
 const data = ctx.getImageData(0, 0, 1, 1).data;
 const r = data[0];
 const g = data[1];
 const b = data[2];

 // Возвращаем HEX-цвет
 return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

// Основная функция
function setPosterBackground() {
 const blurImg = document.querySelector('.blurID');
 if (!blurImg) {
 console.error('Элемент с классом .blurID не найден');
 return;
 }

 const updateBackground = function() {
 const color = getDominantColor(blurImg);
 const poster = document.querySelector('.postID');
 if (poster) {
 poster.style.backgroundColor = color;
 console.log('Установлен фон:', color);
 }
 };

 // Ждем загрузки изображения, если оно еще не загружено
 if (!blurImg.complete) {
 const handler = function() {
 updateBackground();
 blurImg.removeEventListener('load', handler); // Удаляем обработчик
 };
 blurImg.addEventListener('load', handler);
 } else {
 // Если уже загружено
 updateBackground();
 }
}

// Запускаем при загрузке страницы
document.addEventListener('DOMContentLoaded', setPosterBackground);
</script>