简介

偶尔需要转换颜色格式，然后使用。如rgb和十六进制之间的互相转换

具体实现

使用：
import { TzColorExchangeStyle } from colorExchange.js
console.log(TzColorExchangeStyle.formatColorFun('#ffffff'))

// colorExchange.js
class TzColorExchangeStyle {
  static get reg() {
    return /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  }

  static get regTwo() {
    return /^0x([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  }

  // rgb转换为 #?????? 的16进制，或补全#fff为#ffffff
  static rgbToHexadecimalNormal(value) {
    // 如果是rgb颜色表示
    if (/^(rgb|RGB)/.test(value)) {
      let aColor = value.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
      let strHex = '#'
      for (let i = 0; i < aColor.length; i++) {
        let hex = Number(aColor[i]).toString(16)
        if (hex === '0') {
          hex += hex
        }
        strHex += hex
      }
      if (strHex.length !== 7) {
        strHex = value
      }
      return strHex
    } else if (this.reg.test(value)) {
      let aNum = value.replace(/#/, '').split('')
      if (aNum.length === 6) {
        return value
      } else if (aNum.length === 3) {
        let numHex = '#'
        for (let i = 0; i < aNum.length; i += 1) {
          numHex += aNum[i] + aNum[i]
        }
        return numHex
      }
    }
    return value
  }

  // rgb转换为 0x?????? 的16进制
  static rgbToHexadecimalOther(value) {
    let val = this.rgbToHexadecimalNormal(value)
    if (val.indexOf('#') > -1 && val.lastIndexOf('#') === val.indexOf('#')) {
      val = val.replace('#', '0x')
    }
    return val
  }

  // 两种16进制颜色之一转为RGB格式
  static hexadecimalToRgb(value) {
    let sColor = value.toLowerCase()
    if (sColor && this.reg.test(sColor)) {
      if (sColor.length === 4) {
        let sColorNew = '#'
        for (let i = 1; i < 4; i += 1) {
          sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
        }
        sColor = sColorNew
      }
      // 处理1+6位的颜色值
      let sColorChange = []
      for (let i = 1; i < 7; i += 2) {
        sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
      }
      return 'rgb(' + sColorChange.join(',') + ')'
    } else if (sColor && this.regTwo.test(sColor)) {
      if (sColor.length === 4) {
        let sColorNew = '0x'
        for (let i = 1; i < 4; i += 1) {
          sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
        }
        sColor = sColorNew
      }
      // 处理2+6位的颜色值
      let sColorChange = []
      for (let i = 2; i < 8; i += 2) {
        sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
      }
      return 'rgb(' + sColorChange.join(',') + ')'
    }
    return sColor
  }

  static formatColorFun(value) {
    let obj = {
      hexadecimalNormal: '',
      hexadecimalOther: '',
      rgb: this.hexadecimalToRgb(value)
    }
    obj.hexadecimalNormal = this.rgbToHexadecimalNormal(obj.rgb)
    obj.hexadecimalOther = this.rgbToHexadecimalOther(obj.rgb)
    return obj
  }
}

export {
  TzColorExchangeStyle 
}

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！