js模拟ps吸管吸取颜色功能

最新推荐文章于 2024-04-27 14:59:16 发布

一个巨蟹座的前端

最新推荐文章于 2024-04-27 14:59:16 发布

阅读量9k

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_47813845/article/details/123501910

版权

使用EyeDropper API实现的该功能，下面是代码，复制后到开发工具里面可直接运行到浏览器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>取色器 EyeDropper API</title>
  </head>
  <body>
    <img src="https://img1.baidu.com/it/u=4209628392,3031563562&fm=253&fmt=auto&app=138&f=JPEG?w=327&h=500" alt="" width="300" />
    <button id="btn">开始取色</button>
    <div id="color"></div>
    <script>
      if ('EyeDropper' in window) {
        console.log('取色器可以使用')
        const eyeDropper = new EyeDropper()  
        const btn = document.getElementById('btn')
        btn.addEventListener('click', async () => { 
          try {
            const result = await eyeDropper.open() 
            console.log(result)
            const colorHexValue = result.sRGBHex
            document.querySelector('#color').innerHTML = result.sRGBHex
          } catch (e) {
            console.log('用户取消了取色')
          }
        })
      }
    </script>
  </body>
</html>

一个巨蟹座的前端

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js模拟ps吸管吸取颜色功能

使用EyeDropper API实现的该功能，下面是代码，复制后到开发工具里面可直接运行到浏览器<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=
复制链接

扫一扫