系统级取色器

EyeDropper 接口表示一个拾色器工具的实例，用户可以打开并使用它从屏幕上选择颜色。

构造函数

EyeDropper()

返回一个新的 EyeDropper 实例。

实例方法

EyeDropper 接口不继承任何方法。

EyeDropper.open()

返回一个 Promise，该 Promise 会兑现一个可以访问所选颜色的对象。

演示

结果：

点击查看代码

<script setup>
// 按钮点击事件
const openEyeDropper = () => {

    // 获取结果元素
    const resultBgElement = document.getElementById("resultBg");
    const resultContentElement = document.getElementById("resultContent");

    // 检查浏览器是否支持 EyeDropper API
    if (!window.EyeDropper) {
        resultContent.textContent = "你的浏览器不支持 EyeDropper API";
        return;
    }

    // 创建 EyeDropper 实例
    const eyeDropper = new EyeDropper();

    // 打开拾色器并获取所选颜色
    eyeDropper
        .open()
        .then((result) => {
            resultContent.textContent = result.sRGBHex;
            resultBgElement.style.backgroundColor = result.sRGBHex;
            resultBgElement.style.display = "inline-block";
            resultBgElement.style.width = 60 + "px";
            resultBgElement.style.height = 20 + "px";
            resultBgElement.style.marginRight = 10 + "px";
        })
        .catch((e) => {
            resultContent.textContent = e;
        });
}
<script>