js根据图片的对比度来调整文字的颜色

// 	根据英雄面板的图片亮度改变英雄面板的文本颜色
	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);
	}