【日常记录】【JS】浏览器本身的取色器-编程知识

【日常记录】【JS】浏览器本身的取色器

文章目录

- 1、介绍
- 2、打开拾色器并且取样
- 3、代码中止拾色器
- 4、参考连接

1、介绍

EyeDropper 接口表示一个拾色器工具的实例，用户可以打开并使用它从屏幕上选择颜色。 (他还是一个实验性的技术，存在兼容性问题）

EyeDropper MDN 介绍

2、打开拾色器并且取样

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="https://picsum.photos/200?1" alt=""><button id="btn">开始取色</button><div class="box" style="width: 200px;height: 200px;border: 1px solid red;">实时更新颜色区域</div><script>let btnEl = document.querySelector('#btn');let boxEl = document.querySelector('.box')btnEl.addEventListener('click', async function () {// 1、new 一个实例// 2、调用open 方法const eyeDropper = new EyeDropper();try {const res = await eyeDropper.open();console.log('获取到了颜色', res);boxEl.style.background = res.sRGBHex;} catch (error) {console.log('用户取消了，按下了 esc 键');}})</script>
</body></html>

3、代码中止拾色器

在这里插入图片描述

  <img src="https://picsum.photos/200?1" alt=""><button id="start-button">打开拾色器</button> <span id="result"></span><script>document.getElementById("start-button").addEventListener("click", () => {const resultElement = document.getElementById("result");if (!window.EyeDropper) {resultElement.textContent = "你的浏览器不支持 EyeDropper API";return;}const eyeDropper = new EyeDropper();const abortController = new AbortController();eyeDropper.open({ signal: abortController.signal }).then((result) => {resultElement.textContent = result.sRGBHex;resultElement.style.backgroundColor = result.sRGBHex;}).catch((e) => {resultElement.textContent = '代码的方式中止了';});setTimeout(() => {abortController.abort();}, 2000);});</script>