使用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>
|