JS判断颜色是否为深色 阀值

前言

碰到一个有趣的项目需求，判断颜色的深浅，若为深色则设置浅色阴影；反之，设置深色阴影。

本来没有头绪，怎样从才能知晓她的深浅呢，百度一下就tmd有了结果。

// arr为用于存储rgb的三个数据
var $grayLevel = arr[0] * 0.299 + arr[1] * 0.587 + arr[2] * 0.114;

知道其原理，则可以开始实践了…

  <div id="app">
    <div :style="bgc"></div>
    <br><br>
    <button @click="testing">testing</button>
  </div>

    new Vue({
      el: '#app',
      data() {
        return {
          bgc: {
            width: '80px',
            height: '80px',
            backgroundColor: 'rgb(255,200,255)',
            margin: '10px',
            boxShadow: ''
          }
        }
      },
      methods: {
        testing() {
          var color = this.bgc.backgroundColor
          var arr = color.replace('rgb(','').replace(')','').split(',').map(Number);
          console.log(arr);
          var $grayLevel = arr[0] * 0.299 + arr[1] * 0.587 + arr[2] * 0.114;
          console.log($grayLevel);

          if ($grayLevel >= 192) {
          　　this.turnDarkColor(arr)
          } else {
          　　this.turnLightColor(arr)
          }
        },
        turnDarkColor(arr) {
          var cla = new ColorHandle();
          var hex = cla.RgbToHex(arr[0],arr[1],arr[2]);
          this.bgc.boxShadow = "10px 10px 10px 8px " + cla.getDarkColor(hex,0.6)
        },
        turnLightColor(arr) {
          var cla = new ColorHandle();
          var hex = cla.RgbToHex(arr[0],arr[1],arr[2]);
          this.bgc.boxShadow = "10px 10px 10px 8px " + cla.getLightColor(hex,0.6)
        }
      }
    })

这里需引入一个颜色转换的js文件：

附上链接

效果图如下：