通过canvas获取图片的平均饱和度

 function binary2rgba(uint8ClampedArray) {
            const rgbaList = []
            for (let i = 0; i < uint8ClampedArray.length; i++) {
                if (i % 4 === 0) {
                    rgbaList.push({ r: uint8ClampedArray[i] })
                    continue
                }
                const currentRgba = rgbaList[rgbaList.length - 1]
                if (i % 4 === 1) {
                    currentRgba.g = uint8ClampedArray[i]
                    continue
                }
                if (i % 4 === 2) {
                    currentRgba.b = uint8ClampedArray[i]
                    continue
                }
                if (i % 4 === 3) {
                    currentRgba.a = uint8ClampedArray[i]
                    continue
                }
            }
            return rgbaList
        }
        // 将rgb转换成hsl
        function rgb2hsl(r, g, b) {
            r = r / 255;
            g = g / 255;
            b = b / 255;

            var min = Math.min(r, g, b);
            var max = Math.max(r, g, b);
            var l = (min + max) / 2;
            var difference = max - min;
            var h, s, l;
            if (max == min) {
                h = 0;
                s = 0;
            } else {
                s = l > 0.5 ? difference / (2.0 - max - min) : difference / (max + min);
                switch (max) {
                    case r: h = (g - b) / difference + (g < b ? 6 : 0); break;
                    case g: h = 2.0 + (b - r) / difference; break;
                    case b: h = 4.0 + (r - g) / difference; break;
                }
                h = Math.round(h * 60);
            }
            s = Math.round(s * 100);//转换成百分比的形式
            l = Math.round(l * 100);
            return { h, s, l };
        }
        
        // 获取一个图片的平均饱和度
        function getImageSaturation(canvas) {
            const ctx = canvas.getContext('2d')
            // 获取图片的像素点
            const uint8ClampedArray = ctx.getImageData(0, 0, canvas.width, canvas.height).data
            // 获取每个像素点的rgba值
            const rgbaList = binary2rgba(uint8ClampedArray)
            // 将每个像素点的rgb值转换成hsl值
            const hslList = rgbaList.map(item => {
                return rgb2hsl(item.r, item.g, item.b)
            })
            // 求平均值
            const avarageSaturation = hslList.reduce((total, curr) => total + curr.s, 0) / hslList.length
            return avarageSaturation
        }