js 取色器和 颜色拾取工具

取色器

input在html5中有新增了type=color的属性有一个直接值的 取色器 拾色器 ,点击滴管进入取色,监听input事件追踪值的变化 input的value值会返回十六进制,所以写了一个内置conversion函数转成rgb

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .test {
      display: flex;
    }
    /* css 改变取色器的样式去边框款高度等 */

    input[type="color"] {
      -webkit-appearance: none;
      border: none;
      padding: 0;
      border-radius: 2px;
      width: 30px;
    }

    input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
      margin: 0;
    }

    input[type="color"]::-webkit-color-swatch {
      border: none;
      border-radius: 2px;
    }
  </style>
</head>

<body>
  <div class="test">
    <input type="color" id="htmlColorEl">
    <div id="show"></div>
  </div>

  <script>
    document.getElementById("htmlColorEl").addEventListener("input", (e) => {
      let conversion = function (value) {
        // 16进制颜色值的正则
        let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        // 把颜色值变成小写
        let color = value.toLowerCase();
        if (reg.test(color)) {
          // 如果只有三位的值,需变成六位,如:#fff => #ffffff
          if (color.length === 4) {
            let colorNew = "#";
            for (let i = 1; i < 4; i += 1) {
              colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
            }
            color = colorNew;
          }
          // 处理六位的颜色值,转为RGB
          let colorChange = [];
          console.log("%c Line:67 🥛 color", "color:#2eafb0", color);
          for (let j = 1; j < 7; j += 2) {
            /* 
               input的value值会返回十六进制, 显示 RGB 要转换一下

               parseInt()  
               如果 string 以 "0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。
               如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
               如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。
            */
            colorChange.push(parseInt("0x" + color.slice(j, j + 2)));
          }
          return "RGB(" + colorChange.join(",") + ")";
        } else {
          return color;
        }
      };

      var test = conversion(document.getElementById("htmlColorEl").value)
      console.log(document.getElementById("htmlColorEl").value, 'test', test)
      document.getElementById("show").innerHTML = test
    })
  </script>
</body>

</html>

颜色拾取工具

IEyeDropper API 提供浏览器提供的吸管,用于构建自定义颜色选择器
这个可以在屏幕的任何地方取颜色哦~ 包括浏览器外面的区域,它有什么好处呢?不知道大家用过 figma,或者蓝湖没有,诸如此类的 web 端 ui 设计应用,取色是一个很常用的功能项(包括我们平时开发页面时,不需要借用其他工具去别的窗口提取UI给出的设计图某块区域的颜色值,现在通过这个特性就能简单的实现!)

使用取色器 EyeDropper API我们可以在屏幕上拾取颜色,就跟ps的吸管功能一样。从Chrome 95才开始支持的。
首先,还是要判断一下浏览器支不支持:

if ('EyeDropper' in window) {
  console.log('取色器可以使用')
}

使用时,先new一个EyeDropper对象:

const eyeDropper = new EyeDropper()

调用这个对象的open方法,就开始拾取颜色了,open方法返回的是一个promise对象,用户在点击屏幕拾取颜色后,会resolve,如果用户按esc键退出,会reject:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>取色器 EyeDropper API</title>
  </head>
  <body>
    <button id="btn">开始取色</button>
    <script>
      if ('EyeDropper' in window) {
        console.log('取色器可以使用')
        const eyeDropper = new EyeDropper()  // 初始化一个EyeDropper对象
        const btn = document.getElementById('btn')
        btn.addEventListener('click', async () => { // 监听按钮的点击事件
          try {
            const result = await eyeDropper.open() // 开始拾取颜色
            console.log(result)
            const colorHexValue = result.sRGBHex
            console.log(colorHexValue)  // 打印出颜色的值
          } catch (e) {
            console.log('用户取消了取色')
          }
        })
      }
    </script>
  </body>
</html>

在点击按钮后,鼠标变成拾取颜色的状态, 随便点击一点,就可以返回颜色了,

在这里插入图片描述
如果开始取色后,用户按下键盘的esc键,promise就会reject,就会打印catch中的内容了

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值