vue实现颜色进制转化

1.rgb值转十六进制值

/**
 * Convert rgb value to hex value.
 * rgb值转十六进制值
 * @method rgbToHex
 * @param r
 * @param g
 * @param b
 * @returns {string} eg:'#00ff00'
 */
rgbToHex (r, g, b) {
    var s = ((r << 16) | (g << 8) | b).toString(16);
    while (s.length < 6)
        s = "0" + s;
    return '#' + s;
},

2.十进制值转十六进制值颜色

/**
 * 十进制值转十六进制值颜色
 * @method toHexColor
 * @param num {number} 十进制颜色值
 * @returns {string} eg:'#00ff00'
 */
toHexColor(num) {
    var s = num.toString(16);
    while (s.length < 6)
        s = "0" + s;
    return '#' + s;
},

3.判定颜色是否是深色

/**
 * 判定颜色是否是深色
 * @param color  {string} eg:'#00ff00'
 */
isDark(color){
    var rgb = this.colorToRgb(color,1);
    return rgb[0]*0.299 + rgb[1]*0.578 + rgb[2]*0.114 < 192;
},

4.rgba值转rgba字符串

/**
 * rgba值转rgba字符串
 * @method asColorStyle
 * @param r
 * @param g
 * @param b
 * @param a
 * @returns {string} eg:'rgba(255,255,255,0.5)'
 */
asColorStyle(r, g, b, a) {
    return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
},

5.获取随机颜色

/**
 * 获取随机颜色
 * @returns {string}
 */
getRandomColor() {
    return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
},

6.十六进制值转rgba值

/**
 * 十六进制值转rgba值
 * @method colorToRgb
 * @param sColor {string} '#00ff00'/'#00ff00ff'
 * @param returnType {int} 0: RGB(0,0,0)/rgba(0,0,0,0) || 1: [0,0,0] || 2:{rgba}
 * @param alpha {int} 优先认8位颜色的a值
 * @returns {*}
 */
colorToRgb(sColor, returnType, alpha) {
    sColor = sColor.toLowerCase();
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/;
    if (sColor && reg.test(sColor)) {
        if (sColor.length === 4) {
            var sColorNew = "#";
            for (var i = 1; i < 4; i += 1) {
                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
            }
            sColor = sColorNew;
        }
        //处理6-8位的颜色值
        var sColorChange = [];
        sColor = sColor.slice(1);
        for (var i = 0; i < sColor.length; i += 2) {
            sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
        }
        if (returnType == 0){
            if(sColorChange.length == 4)
                sColorChange[3]/=255;
            else if(typeof alpha != 'undefined')
                sColorChange.push(alpha)
            var prefix = sColorChange.length == 4 ? 'rgba(' : 'RGB(';
            return prefix + sColorChange.join(",") + ")";
        }
        else if (returnType == 1){
            if(sColorChange.length<4)
                sColorChange.push((typeof alpha != 'undefined' ? alpha : 1)*255);
            return sColorChange;
        }
        else if(returnType == 2){
            return {r:sColorChange[0],g:sColorChange[1],b:sColorChange[2],a:sColorChange[3]||(typeof alpha != 'undefined' ? alpha : 1)}
        }
    } else {
        return sColor;
    }
},