浏览器屏幕颜色吸取

2025/02/12

要在浏览器中吸取屏幕颜色，通常使用一些颜色吸取工具比如说: 浏览器扩展, 或第三方工具(如 Mac自带的数码测色计), 那么如何在不跳出浏览器的环境下实现该功能呢?

Canvas API

Canvas的 getImageData(sx, sy, sw, sh, settings), 返回一个 ImageData 对象，该对象表示Canvas指定部分的基础像素数据

ctx.getImageData(x, y, 1, 1) // [198, 90, 57, 255]

input type=“color”

<input> color 类型的元素提供了一个用户界面元素，该元素允许用户通过使用可视颜色选取器界面或以十六进制格式在文本字段中输入颜色来指定颜色 #rrggbb

使用限制

只允许使用基本的十六进制颜色（没有 alpha 通道）
表示形式可能因浏览器和/或平台而异

EyeDropper API

EyeDropper 界面表示吸管工具的一个实例，用户可以打开并使用该工具从屏幕中选择颜色, https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper

<button id="start-button" style="all:revert;">打开 EyeDropper</button> <span id="result"></span>
<script>
document.getElementById("start-button").addEventListener("click", () => {
const resultElement = document.getElementById("result");
const eyeDropper = new EyeDropper();
eyeDropper
  .open()
  .then((result) => {
    resultElement.textContent = result.sRGBHex;
    resultElement.style.backgroundColor = result.sRGBHex;
  })
  .catch((e) => {
    resultElement.textContent = e;
  });
});
</script>

使用限制

仅在安全上下文（HTTPS）中可用
这是一项实验性技术, 目前仅在 Chrome, Edge 中可用。https://caniuse.com/mdn-api_eyedropper

Edit this page on GitHub