js实现根据图片颜色获取主色，同时动态改变dom里面文字的颜色

var imgfun = function () {
        const imgElement = document.querySelector('.img img');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = imgElement.src;
        img.crossOrigin = "anonymous";
        
        // 异步处理图片加载
        img.onload = async () => {
            try {
                ctx.drawImage(img, 0, 0);
                const imgData = ctx.getImageData(0, 0, img.width, img.height).data;
                const averageBrightness = await calculateAverageBrightness(imgData);
                console.log(`Average Brightness: ${averageBrightness}`);
        
                const oppositeColor = getOppositeColor(averageBrightness);
                const oppositeColorStr = `rgb(${oppositeColor.join(',')})`;
        
                setStyles(oppositeColorStr, imgData);
            } catch (error) {
                console.error('Error processing image:', error);
            }
        };
        
        // 计算平均亮度的函数
        async function calculateAverageBrightness(imgData) {
            let totalBrightness = 0;
            const pixelCount = imgData.length / 4;
        
            for (let i = 0; i < pixelCount; i++) {
                const index = i * 4;
                const brightness = 0.299 * imgData[index] + 0.587 * imgData[index + 1] + 0.114 * imgData[index + 2];
                totalBrightness += brightness;
            }
            return totalBrightness / pixelCount;
        }
        
        // 获取对比色的函数
        function getOppositeColor(averageBrightness) {
            if (averageBrightness > 200) {
                return [51, 51, 51]; 
            } else if (averageBrightness > 157) {
                return [51, 51, 51]; 
            } else if (averageBrightness > 100) {
                return [255, 255, 255]; 
            } else if (averageBrightness > 50) {
                return [255, 255, 255]; 
            } else {
                return [255, 255, 255]; 
            }
        }
        
        // 应用样式到页面元素
        function setStyles(oppositeColorStr, imgData) {
            const bgColor = `rgba(${imgData[0]}, ${imgData[1]}, ${imgData[2]}, ${imgData[3] / 255})`;
            document.querySelector('.down_info_top').style.backgroundColor = bgColor;
            document.querySelectorAll('.down_info_top .item .info dl, .down_info_top .item .info dd, .down_info_top .item .info h1')
                .forEach(element => element.style.color = oppositeColorStr);
        }

    }
    imgfun();