编程技术记录

世界你好!

let colorNameMap = {
  aliceblue : '#f0f8ff',
  antiquewhite : '#faebd7',
  aqua : '#00ffff',
  aquamarine : '#7fffd4',
  azure : '#f0ffff',
  beige : '#f5f5dc',
  bisque : '#ffe4c4',
  black : '#000000',
  blanchedalmond : '#ffebcd',
  blue : '#0000ff',
  blueviolet : '#8a2be2',
  brown : '#a52a2a',
  burlywood : '#deb887',
  cadetblue : '#5f9ea0',
  chartreuse : '#7fff00',
  chocolate : '#d2691e',
  coral : '#ff7f50',
  cornflowerblue : '#6495ed',
  cornsilk : '#fff8dc',
  crimson : '#dc143c',
  cyan : '#00ffff',
  darkblue : '#00008b',
  darkcyan : '#008b8b',
  darkgoldenrod : '#b8860b',
  darkgray : '#a9a9a9',
  darkgrey : '#a9a9a9',
  darkgreen : '#006400',
  darkkhaki : '#bdb76b',
  darkmagenta : '#8b008b',
  darkolivegreen : '#556b2f',
  darkorange : '#ff8c00',
  darkorchid : '#9932cc',
  darkred : '#8b0000',
  darksalmon : '#e9967a',
  darkseagreen : '#8fbc8f',
  darkslateblue : '#483d8b',
  darkslategray : '#2f4f4f',
  darkslategrey : '#2f4f4f',
  darkturquoise : '#00ced1',
  darkviolet : '#9400d3',
  deeppink : '#ff1493',
  deepskyblue : '#00bfff',
  dimgray : '#696969',
  dimgrey : '#696969',
  dodgerblue : '#1e90ff',
  firebrick : '#b22222',
  floralwhite : '#fffaf0',
  forestgreen : '#228b22',
  fuchsia : '#ff00ff',
  gainsboro : '#dcdcdc',
  ghostwhite : '#f8f8ff',
  gold : '#ffd700',
  goldenrod : '#daa520',
  gray : '#808080',
  grey : '#808080',
  green : '#008000',
  greenyellow : '#adff2f',
  honeydew : '#f0fff0',
  hotpink : '#ff69b4',
  indianred : '#cd5c5c',
  indigo : '#4b0082',
  ivory : '#fffff0',
  khaki : '#f0e68c',
  lavender : '#e6e6fa',
  lavenderblush : '#fff0f5',
  lawngreen : '#7cfc00',
  lemonchiffon : '#fffacd',
  lightblue : '#add8e6',
  lightcoral : '#f08080',
  lightcyan : '#e0ffff',
  lightgoldenrodyellow : '#fafad2',
  lightgray : '#d3d3d3',
  lightgrey : '#d3d3d3',
  lightgreen : '#90ee90',
  lightpink : '#ffb6c1',
  lightsalmon : '#ffa07a',
  lightseagreen : '#20b2aa',
  lightskyblue : '#87cefa',
  lightslategray : '#778899',
  lightslategrey : '#778899',
  lightsteelblue : '#b0c4de',
  lightyellow : '#ffffe0',
  lime : '#00ff00',
  limegreen : '#32cd32',
  linen : '#faf0e6',
  magenta : '#ff00ff',
  maroon : '#800000',
  mediumaquamarine : '#66cdaa',
  mediumblue : '#0000cd',
  mediumorchid : '#ba55d3',
  mediumpurple : '#9370db',
  mediumseagreen : '#3cb371',
  mediumslateblue : '#7b68ee',
  mediumspringgreen : '#00fa9a',
  mediumturquoise : '#48d1cc',
  mediumvioletred : '#c71585',
  midnightblue : '#191970',
  mintcream : '#f5fffa',
  mistyrose : '#ffe4e1',
  moccasin : '#ffe4b5',
  navajowhite : '#ffdead',
  navy : '#000080',
  oldlace : '#fdf5e6',
  olive : '#808000',
  olivedrab : '#6b8e23',
  orange : '#ffa500',
  orangered : '#ff4500',
  orchid : '#da70d6',
  palegoldenrod : '#eee8aa',
  palegreen : '#98fb98',
  paleturquoise : '#afeeee',
  palevioletred : '#db7093',
  papayawhip : '#ffefd5',
  peachpuff : '#ffdab9',
  peru : '#cd853f',
  pink : '#ffc0cb',
  plum : '#dda0dd',
  powderblue : '#b0e0e6',
  purple : '#800080',
  rebeccapurple : '#663399',
  red : '#ff0000',
  rosybrown : '#bc8f8f',
  royalblue : '#4169e1',
  saddlebrown : '#8b4513',
  salmon : '#fa8072',
  sandybrown : '#f4a460',
  seagreen : '#2e8b57',
  seashell : '#fff5ee',
  sienna : '#a0522d',
  silver : '#c0c0c0',
  skyblue : '#87ceeb',
  slateblue : '#6a5acd',
  slategray : '#708090',
  slategrey : '#708090',
  snow : '#fffafa',
  springgreen : '#00ff7f',
  steelblue : '#4682b4',
  tan : '#d2b48c',
  teal : '#008080',
  thistle : '#d8bfd8',
  tomato : '#ff6347',
  turquoise : '#40e0d0',
  violet : '#ee82ee',
  wheat : '#f5deb3',
  white : '#ffffff',
  whitesmoke : '#f5f5f5',
  yellow : '#ffff00',
  yellowgreen : '#9acd32',
}

// 5种模式 全部转换程 'RRGGBBAA'的小写表示
// 1、颜色名,如'red','black'
// 2、三位十六进制,如'#fba'
// 3、六位十六进制, 如'#ffbbaa'
// 4、rgb ,如rgb(255,220,123)
// 5、rgba,如rgba(255,220,123,30)
function convertStringToHexColor(colorStr) 
{
    let BLACK = '000000ff'
    if (typeof colorStr !== 'string' || colorStr.length <= 1) {
        return BLACK; //非法,返回黑色
    }
    colorStr = colorStr.toLowerCase();
    if ( colorStr.slice(0,1) === '#') //十六进制
    {
        colorStr = colorStr.slice(1)
        if(colorStr.length < 4) //三位 FFF
        {
            if(colorStr.length < 3){
                colorStr = ('000' + colorStr).slice(-3);
            }
            return colorStr.charAt(0).concat(colorStr.charAt(0),
                                            colorStr.charAt(1),
                                            colorStr.charAt(1),
                                            colorStr.charAt(2),
                                            colorStr.charAt(2),
                                            'ff');
        }
        else //六位 ffbbaa
        {
            if(colorStr.length < 3){
                colorStr = ('000000' + colorStr).slice(-6);
            }
            return colorStr + 'ff';
        }
    }
    else if ( colorStr.length > 4 && colorStr.slice(0,4) === 'rgba')  // rgba(1,2,3,4)
    {
        let start = colorStr.indexOf('(');
        let end = colorStr.indexOf(')');
        if (start === -1 || end === -1 || (start+1) >= end ) {
            return BLACK
        }
        rgb = colorStr.slice(start + 1,end).split(',');
        if (rgb.length !== 4) {
            return BLACK;
        }
        return ''.concat(parseInt(rgb[0]).toString(16).slice(-2),
                         parseInt(rgb[1]).toString(16).slice(-2),
                         parseInt(rgb[2]).toString(16).slice(-2),
                         parseInt(rgb[3]).toString(16).slice(-2));
    }
    else if ( colorStr.length > 3 && colorStr.slice(0,3) === 'rgb' ) //rgb(1,2,3)
    {
        let start = colorStr.indexOf('(');
        let end = colorStr.indexOf(')');
        if (start === -1 || end === -1 || (start+1) >= end ) {
            return BLACK
        }
        rgb = colorStr.slice(start + 1,end).split(',');
        if (rgb.length !== 3) {
            return BLACK;
        }
        return ''.concat(parseInt(rgb[0]).toString(16).slice(-2),
                        parseInt(rgb[1]).toString(16).slice(-2),
                        parseInt(rgb[2]).toString(16).slice(-2),
                        'ff');
    }
    else if (colorNameMap[colorStr] !== undefined)
    {
        colorStr = colorNameMap[colorStr].slice(1);
        return colorStr + 'ff';
    }
    else{
        return BLACK;  //非法,返回黑色
    }
}

console.log(convertStringToHexColor(''))
console.log(convertStringToHexColor('#'))
console.log(convertStringToHexColor('red'))
console.log(convertStringToHexColor('#FBA'))
console.log(convertStringToHexColor('#FFBBAA'))
console.log(convertStringToHexColor('rgb(255,254,253)'))
console.log(convertStringToHexColor('rgba(255,254,253,100)'))

© Beli. All Rights Reserved.