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=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.sRGBHexdocument.querySelector('#color').innerHTML = result.sRGBHex} catch (e) {console.log('用户取消了取色')}})}</script></body>
</html>

js模拟ps吸管吸取颜色功能相关推荐

使用HTML+CSS+JS模拟比赛晋级的动画功能
使用HTML+CSS+JS模拟比赛晋级的动画功能 1.需求描述 2.代码实现 3.效果演示系统:Win10 Chrome:106.0.5249.119 演示视频:[英雄联盟]S12全球总决赛冠军预测 ...
0807-0815原生js模拟实现真快乐网站
0807-0815原生js模拟实现真快乐网站功能实现首页: 无缝轮播图: 自动播放,鼠标移入暂停,鼠标移入浮标切换图片,按钮切换上下图片二级菜单鼠标移入商品分类列表弹出相关二级菜单楼层电梯 ...
[js] 模拟 localStorage 时如何实现过期时间功能
[js] 模拟 localStorage 时如何实现过期时间功能 1.存储时记录下有效截止时间 2.取数据时判断是否超过有效时间,在有效期内则返回,不在则提示或返回空并且将其删除 class MySt ...
html中实现添加水印的功能,JS模拟实现图片添加水印功能
JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能,于是 ...
吸取ps以外的颜色_我从黑，白，红以外的颜色中学到了什么
吸取ps以外的颜色 "In visual perception, a color is almost never seen as it really is - as it physicall ...
php模拟js点击按钮,JS模拟按钮点击功能的方法
本文实例讲述了JS模拟按钮点击功能的方法.分享给大家供大家参考,具体如下: usually function function load(){ //下面两种方法效果是一样的 document.getE ...
JS模拟实现图片添加水印功能
JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能,于是 ...
吸管工具，canvas模拟吸管工具，吸取图片中的颜色值 vue.js 颜色值转换
canvas-straw.vue :吸取颜色组件 <template><div class="color-content" :style="{'-- ...
linux脚本红包,利用adb shell和node.js实现抖音自动抢红包功能(推荐)
逻辑很简单,在抖音视频播完之后如果是红包视频,会跳出红包. 我们模拟逻辑如下: 点击屏幕中央,如果有红包打开红包,没有红包则暂停视频. 点击返回按钮,如果有红包关闭红包界面,没有红包提示再按一次退出( ...
android js shell,利用adb shell和node.js实现抖音自动抢红包功能(推荐)
逻辑很简单,在抖音视频播完之后如果是红包视频,会跳出红包. 我们模拟逻辑如下: 点击屏幕中央,如果有红包打开红包,没有红包则暂停视频. 点击返回按钮,如果有红包关闭红包界面,没有红包提示再按一次退出( ...

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

js模拟ps吸管吸取颜色功能相关推荐

最新文章

热门文章