取色器 EyeDropper API_袁志蒙个人博客

摘要：使用取色器 EyeDropper API 我们可以在屏幕上拾取颜色，就跟ps的吸管功能一样。这是一个实验性的API，从Chrome 95才开始支持的。我们就来试用一下。首先，还是要判断一下浏...

使用取色器 EyeDropper API 我们可以在屏幕上拾取颜色，就跟ps的吸管功能一样。

这是一个实验性的API，从Chrome 95才开始支持的。

我们就来试用一下。

首先，还是要判断一下浏览器支不支持：

if ('EyeDropper' in window) {
  console.log('取色器可以使用');
}

使用时，先new一个 EyeDropper 对象，调用这个对象的open方法，就开始拾取颜色了，open方法返回的是一个promise对象，用户在点击屏幕拾取颜色后，会resolve，如果用户按esc键退出，会reject：

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();

下面我们来写一个最简单的例子，在网页中放一张图片，和一个按钮，点击按钮开始拾取颜色，用户拾取颜色后，把颜色值打印出来：

<!DOCTYPE html>
<html>

<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>
    <img src="https://www.yzmask.com/uploads/202006/07/200607095436213.jpg" alt="" width="300" />
    <button id="btn">开始取色</button>
    <div>
     取色后显示：<span id="color"></span>
    </div>
    <script>
    if ('EyeDropper' in window) {
        const eyeDropper = new EyeDropper();
        const btn = document.getElementById('btn');
        btn.addEventListener('click', async () => {
            try {
                const result = await eyeDropper.open();
                console.log(result);
                const colorHexValue = result.sRGBHex;
                document.querySelector('#color').innerHTML = result.sRGBHex;
            } catch (e) {
                console.log('用户取消了取色');
            }
        })
    }else{
     alert('您的浏览器不支持EyeDropper取色器！');
    }
    </script>
</body>

</html>

随机内容