js 取色器和颜色拾取工具

最新推荐文章于 2024-06-11 08:08:31 发布

qq1208013747

最新推荐文章于 2024-06-11 08:08:31 发布

阅读量1.6k

点赞数

分类专栏：原生js 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/ss043500/article/details/130428768

版权

原生js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

取色器

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 设计应用,取色是一个很常用的功能项（包括我们平时开发页面时，不需要借用其他工具去别的窗口提取ＵＩ给出的设计图某块区域的颜色值，现在通过这个特性就能简单的实现！）

使用取色器 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中的内容了

qq1208013747

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
js 取色器和颜色拾取工具

不知道大家用过 figma，或者蓝湖没有,诸如此类的 web 端 ui 设计应用,取色是一个很常用的功能项（包括我们平时开发页面时，不需要借用其他工具去别的窗口提取ＵＩ给出的设计图某块区域的颜色值，现在通过这个特性就能简单的实现！，点击滴管进入取色，监听input事件追踪值的变化 input的value值会返回十六进制，所以写了一个内置conversion函数转成rgb。如果开始取色后，用户按下键盘的esc键，promise就会reject，就会打印catch中的内容了。// 16进制颜色值的正则。
复制链接

扫一扫