取色器
input在html5中有新增了type=color的属性有一个直接值的 取色器 加 拾色器 ,点击滴管进入取色,监听input事件追踪值的变化 input的value值会返回十六进制,所以写了一个内置conversion函数转成rgb
<!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>Document</title>
<style>
.test {
display: flex;
}
/* css 改变取色器的样式去边框款高度等 */
input[type="color"] {
-webkit-appearance: none;
border: none;
padding: 0;
border-radius: 2px;
width: 30px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
margin: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 2px;
}
</style>
</head>
<body>
<div class="test">
<input type="color" id="htmlColorEl">
<div id="show">无</div>
</div>
<script>
document.getElementById("htmlColorEl").addEventListener("input", (e) => {
let conversion = function (value) {
// 16进制颜色值的正则
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 把颜色值变成小写
let color = value.toLowerCase();
if (reg.test(color)) {
// 如果只有三位的值,需变成六位,如:#fff => #ffffff
if (color.length === 4) {
let colorNew = "#";
for (let i = 1; i < 4; i += 1) {
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}
color = colorNew;
}
// 处理六位的颜色值,转为RGB
let colorChange = [];
console.log("%c Line:67 🥛 color", "color:#2eafb0", color);
for (let j = 1; j < 7; j += 2) {
/*
input的value值会返回十六进制, 显示 RGB 要转换一下
parseInt()
如果 string 以 "0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。
*/
colorChange.push(parseInt("0x" + color.slice(j, j + 2)));
}
return "RGB(" + colorChange.join(",") + ")";
} else {
return color;
}
};
var test = conversion(document.getElementById("htmlColorEl").value)
console.log(document.getElementById("htmlColorEl").value, 'test', test)
document.getElementById("show").innerHTML = test
})
</script>
</body>
</html>
颜色拾取工具
IEyeDropper API 提供浏览器提供的吸管,用于构建自定义颜色选择器
这个可以在屏幕的任何地方取颜色哦~ 包括浏览器外面的区域,它有什么好处呢?不知道大家用过 figma,或者蓝湖没有,诸如此类的 web 端 ui 设计应用,取色是一个很常用的功能项(包括我们平时开发页面时,不需要借用其他工具去别的窗口提取UI给出的设计图某块区域的颜色值,现在通过这个特性就能简单的实现!)
使用取色器 EyeDropper API我们可以在屏幕上拾取颜色,就跟ps的吸管功能一样。从Chrome 95才开始支持的。
首先,还是要判断一下浏览器支不支持:
if ('EyeDropper' in window) {
console.log('取色器可以使用')
}
使用时,先new一个EyeDropper对象:
const eyeDropper = new EyeDropper()
调用这个对象的open方法,就开始拾取颜色了,open方法返回的是一个promise对象,用户在点击屏幕拾取颜色后,会resolve,如果用户按esc键退出,会reject:
<!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>
<button id="btn">开始取色</button>
<script>
if ('EyeDropper' in window) {
console.log('取色器可以使用')
const eyeDropper = new EyeDropper() // 初始化一个EyeDropper对象
const btn = document.getElementById('btn')
btn.addEventListener('click', async () => { // 监听按钮的点击事件
try {
const result = await eyeDropper.open() // 开始拾取颜色
console.log(result)
const colorHexValue = result.sRGBHex
console.log(colorHexValue) // 打印出颜色的值
} catch (e) {
console.log('用户取消了取色')
}
})
}
</script>
</body>
</html>
在点击按钮后,鼠标变成拾取颜色的状态, 随便点击一点,就可以返回颜色了,
如果开始取色后,用户按下键盘的esc键,promise就会reject,就会打印catch中的内容了