JavaScript 浏览器 Eye Dropper API 拾取颜色怎么做-js教程-PHP中文网

eyedropper api 可在 chrome 113+、edge 113+、opera 99+ 安全上下文中调用，通过 new eyedropper().open() 唤起原生取色器，返回含 srgbhex 和 rgb 的对象，需手动降级处理不支持场景。

直接调用 eyedropper 构造函数并执行 open() 方法，就能唤起浏览器原生取色器，用户点击页面任意位置后返回该像素的颜色值（hex、rgb 或 rgba 格式）。

确保环境支持并创建实例

Eye Dropper API 目前仅在 Chrome 113+、Edge 113+ 和 Opera 99+ 中可用，且必须运行在安全上下文（https:// 或 localhost）。使用前需检查是否存在：

先判断 window.EyeDropper 是否存在，避免报错
存在则新建 new EyeDropper() 实例
调用 instance.open()，它返回一个 Promise

获取并处理颜色结果

open() 成功后解析的值是一个包含 sRGBHex（如 "#4a90e2"）和 rgb（如 "rgb(74, 144, 226)"）的对象。注意：没有 alpha 通道信息，不返回透明度；若需 RGBA，需结合目标元素的 opacity 或 canvas 像素读取另行处理。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

直接解构获取 sRGBHex 最常用，兼容性好、易复制
rgb 字符串可直接用于 CSS 的 color 或 background
若需 RGB 数组，可手动解析 rgb(74, 144, 226) 字符串

添加按钮触发并优雅降级

不要自动启动取色器，应由用户主动触发（如点击按钮），同时为不支持的浏览器提供备选方案：

按钮绑定 click 事件，内部做 if (EyeDropper) 判断
不支持时，可回退到输入 HEX 的文本框 + 颜色预览区
捕获 DOMException（如用户取消），避免未处理 Promise 拒绝警告

简单可用示例代码

以下是一段可直接运行的最小可行代码：

const pickBtn = document.getElementById('pick-color');
if (typeof EyeDropper !== 'undefined') {
  const eyeDropper = new EyeDropper();
  pickBtn.addEventListener('click', async () => {
    try {
      const result = await eyeDropper.open();
      console.log(result.sRGBHex); // "#ff5733"
      document.body.style.backgroundColor = result.sRGBHex;
    } catch (err) {
      console.warn('取色被取消或失败：', err.message);
    }
  });
} else {
  pickBtn.disabled = true;
  pickBtn.textContent = '浏览器不支持';
}