效果
使用环境说明
根据当前的信息，截至到 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;
}index.png
