系统取色器EyeDropper

最新推荐文章于 2024-09-16 13:43:20 发布

Abao

最新推荐文章于 2024-09-16 13:43:20 发布

阅读量261

点赞数 4

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_72439307/article/details/141865204

版权

<button id="start-button">打开拾色器</button> <span id="result"></span>

document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent = "你的浏览器不支持 EyeDropper API";
    return;
  }

  const eyeDropper = new EyeDropper();

  eyeDropper
    .open()
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });
});