效果

在这里插入图片描述

使用环境说明

根据当前的信息，截至到 2023 年 8 月，以下是一些支持使用 new EyeDropper() 的主要浏览器（可能还有其他浏览器也提供了类似的功能）：

Google Chrome：从 Chrome 94 版本开始引入了 new EyeDropper() 构造函数，可以通过 JavaScript API 来创建和使用 EyeDropper` 工具。
Microsoft Edge：从 Edge 94 版本开始，支持 new EyeDropper() 构造函数，你可以在 Edge 中使用 JavaScript 来创建和操作 EyeDropper。
Mozilla Firefox：在 Firefox 浏览器中，可以使用 colorpickereyedropper 事件来实现类似的功能，不过具体的 API 是以事件形式而不是构造函数的形式提供的。

请注意，不同浏览器可能对 new EyeDropper() 的支持程度有所不同，具体支持的版本也可能会随着时间的推移而更新。因此，在实际开发中，建议查阅各个浏览器的官方文档或平台支持信息以获取最新的支持状态和详细的使用说明。

以下浏览器版本经过测试支持使用`EyeDropper`

Microsoft Edge：Microsoft Edge 版本 115.0.1901.188 (正式版本) (64 位)

以下浏览器版本经过测试不支持使用`EyeDropper`

360安全浏览器：360安全浏览器13 版本号: 13.1.1469.0|内核版本:86.0.4240.198
Chrome浏览器: 版本 86.0.4240.198（正式版本）（32 位）
▶Uncaught (in promise) ReferenceError: EyeDropper is not defined
at HTMLButtonElement.btn.onclick (index.js:6) index.js:6

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
    <link type="text/css" rel="styleSheet" href="index.css" />
  </head>
  <body>
    <div class="container">
      <img src="index.png"/>
      <label></label>
      <button>开始取色</button>
      <div class="box"></div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

使用方法

使用：点击开始取色按钮
取消：按下键盘的Esc键

index.js

const btn = document.querySelector('button');
const box = document.querySelector('.box');
const label = document.querySelector ('label');

btn.onclick= async () => {
  const dropper = new EyeDropper();
  try {
    const result = await dropper.open();
    console.log(result);
    box.style.backgroundColor = label.textContent = result.sRGBHex;
  } catch (e) {
    console.log('user cancelled') ;
  }
};

index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  width: 100vw;
  height: 100vh;
  margin: 0;
  /* backgroud: #191c29 */
  background: #fff;
}

.container{
  display: block;
  position: relative;
}

img{
  margin: 10px;
  justify-content: center;
  align-items: center;
  object-fit:cover;
}
.box,
label,
button{
  position: absolute;
  left: 1250px;
  justify-content: center;
  align-items: right;
  margin: 6px;
  width: 130px;
  border: 1px #0b0c1c solid;
  color: #4f538e;
  font-size: 30px;
}

label {
  display: flex;
  top: 10px;
  background-color: #efdbd9;
}

button {
  top: 80px;
  background-color: #4fa1db;
}

.box {
  top:  150px;
  width: 130px;
  height: 130px;
}