怎么使用HTML5中EyeDropperAPI让用户在网页上自由拾取并复制颜色值-H5教程-PHP中文网

EyeDropper API 是 Chromium 浏览器（Chrome 97+等）支持的原生颜色拾取工具，需 HTTPS/localhost 环境，调用 open() 返回 sRGBHex 值，须 try/catch 捕获取消异常。

怎么使用html5中eyedropperapi让用户在网页上自由拾取并复制颜色值

EyeDropper API 是 HTML5 提供的原生颜色拾取工具，允许用户从网页任意位置（包括其他窗口、桌面背景、甚至视频帧）实时选取颜色。它不依赖 Canvas 或截图权限，使用简单且体验原生。

启用 EyeDropper 前的必要检查

该 API 目前仅在 Chromium 内核浏览器（Chrome 97+、Edge 97+、Opera 83+）中支持，且必须运行在安全上下文（HTTPS 或 localhost）。Safari 和 Firefox 尚未实现。

使用前建议检测兼容性：

if ('EyeDropper' in window) {
  // 可以安全使用
} else {
  alert('当前浏览器不支持 EyeDropper API');
}

基础用法：打开拾色器并获取颜色值

调用 new EyeDropper().open() 会弹出系统级拾色光标，用户点击后返回一个包含 sRGBHex 字段的对象（如 { sRGBHex: "#4a90e2" }）。

返回的颜色始终为标准 6 位十六进制格式（#RRGGBB），不含透明度
调用是异步的，需用 await 或 .then() 处理结果
用户取消操作（按 Esc 或点击取消）会抛出异常，应主动捕获

示例代码：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

const button = document.getElementById('pick-color');
button.addEventListener('click', async () => {
  try {
    const eyeDropper = new EyeDropper();
    const result = await eyeDropper.open();
    console.log(result.sRGBHex); // e.g. "#ff5733"
    // 可赋值给 input、更新预览块、复制到剪贴板等
  } catch (err) {
    console.log('用户取消了拾色操作');
  }
});

拾色后自动复制颜色值到剪贴板

结合 navigator.clipboard.writeText()，可在拾色完成后一键复制 HEX 值：

确保页面已获得剪贴板写入权限（通常点击触发即可）
复制成功后可给出视觉反馈（如 toast 提示）
避免在未捕获异常时直接调用 clipboard，否则失败无提示

完整集成示例：

async function pickAndCopy() {
  if (!('EyeDropper' in window)) return;
  
  try {
    const { sRGBHex } = await new EyeDropper().open();
    
    await navigator.clipboard.writeText(sRGBHex);
    showFeedback(`已复制 ${sRGBHex}`);
    
  } catch (err) {
    showFeedback('拾色已取消');
  }
}

function showFeedback(text) {
  const tip = document.createElement('div');
  tip.textContent = text;
  tip.style.cssText = 'position:fixed;top:20px;right:20px;background:#333;color:#fff;padding:8px 16px;border-radius:4px;z-index:1000;';
  document.body.appendChild(tip);
  setTimeout(() => tip.remove(), 2000);
}