Как это работает
* **Поиск источника:** Скрипт находит размытое изображение (`.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>
// Функция для извлечения доминирующего цвета из изображения
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>
1
