// 根据英雄面板的图片亮度改变英雄面板的文本颜色
function calculateImageRelativeBrightness(imgElement) {
return new Promise((resolve, reject) => {
const proxyImg = new Image();
proxyImg.crossOrigin = 'Anonymous';
proxyImg.src = imgElement.src;
proxyImg.onload = function () {
// 创建图像位图
createImageBitmap(proxyImg)
.then(bitmap => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = bitmap.width;
canvas.height = bitmap.height;
context.drawImage(bitmap, 0, 0);
// 获取图像的像素数据
const imageData = context.getImageData(0, 0, bitmap.width, bitmap.height).data;
let totalBrightness = 0;
for (let i = 0; i < imageData.length; i += 4) {
const r = imageData[i] / 255;
const g = imageData[i + 1] / 255;
const b = imageData[i + 2] / 255;
// 计算相对亮度
totalBrightness += 0.2126 * Math.pow(r, 2.2) + 0.7152 * Math.pow(g, 2.2) + 0.0722 * Math.pow(b, 2.2);
}
const averageBrightness = Math.pow(totalBrightness / (bitmap.width * bitmap.height), 1 / 2.2);
resolve(averageBrightness);
})
.catch(error => {
reject(error);
});
};
proxyImg.onerror = function (error) {
reject(error);
};
});
}
2.调整字体颜色的方法
function adjustTextColor(imgElement, textElement) {
if (!imgElement || !textElement) {
console.error('Invalid elements');
return;
}
// 计算相对亮度并调整文本颜色
calculateImageRelativeBrightness(imgElement)
.then(imageBrightness => {
// 根据图像亮度调整文本颜色
if (imageBrightness < 0.5) {
textElement.style.color = '#ffffff'; // Light color
} else {
textElement.style.color = '#00263E'; // Dark color
}
})
.catch(error => {
console.error('Failed to calculate image brightness:', error);
});
}
3.把图片dom和文字dom传进去
// 获取图像和文本元素
const heroImage = document.querySelector('.heroPanelImage');
const heroText = document.querySelector('.heroPanelContent');
// 调整文本颜色
if (lgMediaQuery) {
adjustTextColor(heroImage, heroText);
}