【日常记录】【JS】浏览器本身的取色器

最新推荐文章于 2024-08-27 16:46:18 发布

嘤嘤怪呆呆狗

最新推荐文章于 2024-08-27 16:46:18 发布

阅读量954

点赞数 5

分类专栏： js 文章标签： javascript 前端开发语言拾色器 EyeDropper_API

本文链接：https://blog.csdn.net/qq_45634593/article/details/136663142

版权

js 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

文章目录

1、介绍

EyeDropper 接口表示一个拾色器工具的实例，用户可以打开并使用它从屏幕上选择颜色。 (他还是一个实验性的技术，存在兼容性问题）

EyeDropper MDN 介绍

2、打开拾色器并且取样

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <img src="https://picsum.photos/200?1" alt="">
  <button id="btn">开始取色</button>
  <div class="box" style="width: 200px;height: 200px;border: 1px solid red;">实时更新颜色区域</div>
  <script>
    let btnEl = document.querySelector('#btn');
    let boxEl = document.querySelector('.box')
    btnEl.addEventListener('click', async function () {
    // 1、new 一个实例
    // 2、调用open 方法
      const eyeDropper = new EyeDropper();
      try {
        const res = await eyeDropper.open();
        console.log('获取到了颜色', res);
        boxEl.style.background = res.sRGBHex;
      } catch (error) {
        console.log('用户取消了，按下了 esc 键');
      }
    })
  </script>
</body>

</html>

3、代码中止拾色器

在这里插入图片描述

  <img src="https://picsum.photos/200?1" alt="">
  <button id="start-button">打开拾色器</button> <span id="result"></span>
  <script>
    document.getElementById("start-button").addEventListener("click", () => {
      const resultElement = document.getElementById("result");

      if (!window.EyeDropper) {
        resultElement.textContent = "你的浏览器不支持 EyeDropper API";
        return;
      }

      const eyeDropper = new EyeDropper();
      const abortController = new AbortController();

      eyeDropper
        .open({ signal: abortController.signal })
        .then((result) => {
          resultElement.textContent = result.sRGBHex;
          resultElement.style.backgroundColor = result.sRGBHex;
        })
        .catch((e) => {
          resultElement.textContent = '代码的方式中止了';
        });

      setTimeout(() => {
        abortController.abort();
      }, 2000);
    });
  </script>