16进制颜色、rgb 颜色转换成自定义 rgba 颜色函数

最新推荐文章于 2023-12-29 10:39:54 发布

Qlily_ing

最新推荐文章于 2023-12-29 10:39:54 发布

阅读量670

点赞数

文章标签： rgba、rgb 16进制 color色值转换

本文链接：https://blog.csdn.net/Qlily_ing/article/details/102609146

版权

 getColor (defaultColor, alpha = 0.1) {
                let newColor = "linear-gradient";
                if (defaultColor.includes("linear-gradient")) {
                    defaultColor = defaultColor.match(/#[0-9a-fA-F]{6}/g);
                    defaultColor = this.getAvgColor(defaultColor);
                    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(defaultColor);
                    defaultColor = {
                        r: parseInt(result[1], 16),
                        g: parseInt(result[2], 16),
                        b: parseInt(result[3], 16)
                    };
                    newColor = `rgba(${defaultColor.r},${defaultColor.g},${defaultColor.b},${alpha})`;
                } else if (defaultColor.includes("rgb")) {
                    defaultColor = defaultColor.match(/\d{1,3}/g);
                    newColor = `rgba(${defaultColor[0]},${defaultColor[1]},${defaultColor[2]},${alpha})`;
                } else if (defaultColor.includes("#") && defaultColor.length === 7) {
                    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(defaultColor);
                    defaultColor = {
                        r: parseInt(result[1], 16),
                        g: parseInt(result[2], 16),
                        b: parseInt(result[3], 16)
                    };
                    newColor = `rgba(${defaultColor.r},${defaultColor.g},${defaultColor.b},${alpha})`;
                } else if (defaultColor.includes("#") && defaultColor.length === 4) {
                    let result = /^#?([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(defaultColor);
                    defaultColor = {
                        r: parseInt(result[1], 16),
                        g: parseInt(result[2], 16),
                        b: parseInt(result[3], 16)
                    };
                    newColor = `rgba(${defaultColor.r},${defaultColor.g},${defaultColor.b},${alpha})`;
                } else {
                    newColor = defaultColor;
                }
                return newColor;
            },

getAvgColor (arr) {
                try {
                    let parseColor = function (hexStr) {
                        return hexStr.length === 4 ? hexStr.substr(1).split("").map(function (s) { return 0x11 * parseInt(s, 16); }) : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map(function (s) { return parseInt(s, 16); });
                    };

                    let pad = function (s) {
                        return (s.length === 1) ? "0" + s : s;
                    };

                    let gradientColors = function (start, end, steps, gamma) {
                        let i;
                        let j;
                        let ms;
                        let me;
                        let output = [];
                        let so = [];
                        gamma = gamma || 1;
                        let normalize = function (channel) {
                            return Math.pow(channel / 255, gamma);
                        };
                        start = parseColor(start).map(normalize);
                        end = parseColor(end).map(normalize);
                        for (i = 0; i < steps; i++) {
                            ms = i / (steps - 1);
                            me = 1 - ms;
                            for (j = 0; j < 3; j++) {
                                so[j] = pad(Math.round(Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255).toString(16));
                            }
                            output.push("#" + so.join(""));
                        }
                        return output;
                    };
                    return gradientColors(arr[0], arr[1], 3)[1];
                } catch (err) {
                    return arr[0];
                }
            }