取色器 EyeDropper API

袁志蒙 674次浏览

摘要:使用取色器 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>


随机内容

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~