Этот скрипт на JavaScript автоматически меняет цвет фона постера на доминирующий цвет из его размытой версии. Это создает эффект плавного погружения и делает дизайн интерфейса более целостным. 🎨

Как это работает
* **Поиск источника:** Скрипт находит размытое изображение (`.blurID`), которое служит донором цвета.
* **Магия усреднения:** Извлекает основной цвет, рисуя изображение на скрытом маленьком холсте (canvas) размером **1x1 пиксель**. Таким образом, браузер сам усредняет все цвета в один, избавляя нас от сложных вычислений.
* **Конвертация:** Превращает полученные данные в понятный для CSS HEX-код (например, `#RRGGBB`).
* **Применение:** Устанавливает этот HEX-код в качестве цвета фона для соответствующего контейнера постера (`.posID`).
* **Контроль загрузки:** Если изображение ещё не загрузилось, скрипт подождёт завершения процесса. Если картинка уже в кэше — сработает мгновенно.

### Исходный код для сайта
Разместите этот код в самый низ вашей страницы (перед закрывающим тегом `</body>`), чтобы фон подкрашивался у всех материалов после их загрузки.

Код
<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('.bluID');
  if (!blurImg) {
  console.error('Элемент с классом .bluID не найден');
  return;
  }

  // Ждем загрузки изображения, если оно еще не загружено
  if (!blurImg.complete) {
  blurImg.addEventListener('load', function handler() {
  const color = getDominantColor(blurImg);
  const poster = document.querySelector('.posID');
  if (poster) {
  poster.style.backgroundColor = color;
  console.log('Установлен фон:', color);
  }
  blurImg.removeEventListener('load', handler);  
  });
  } else {
  // Если уже загружено
  const color = getDominantColor(blurImg);
  const poster = document.querySelector('.posID');
  if (poster) {
  poster.style.backgroundColor = color;
  console.log('Установлен фон:', color);
  }
  }
}

// Запускаем при загрузке страницы
document.addEventListener('DOMContentLoaded', setPosterBackground);  
// разработчик by jaguar37rus site htmlstart.ucoz.net
</script>