JavaScript实现系统级别的取色器、EyeDropper、try、catch、finally

---

效果图

---

html

<div class="d_f fd_c ai_c">
    <button id="idBtn" class="cursor_pointer">开始取色</button>

    <div id="idBox" class="m_t_20 w_168 h_68 d_f fd_c jc_c ta_c fw_700"></div>
</div>

---

JavaScript

(function () {
    let btn = document.querySelector('#idBtn');

    btn.onclick = async () => {
        let idBox = document.querySelector('#idBox'),
            dropper = new EyeDropper();

        idBox.style.backgroundColor = '';
        idBox.style.border = `6px solid transparent`;
        idBox.innerHTML = '';

        try {
            let { sRGBHex } = await dropper.open(),
                { hexadecimal, rgb } = subtractColors('ffffff', sRGBHex),
                { r, g, b } = hexToRgb(sRGBHex);

            idBox.style.backgroundColor = sRGBHex;
            idBox.style.border = `6px solid ${hexadecimal}`;
            idBox.innerHTML = `
                
${hexadecimal}">${sRGBHex}
${rgb})">${r}, ${g}, ${b}
`;
} catch (error) {
console.log(error);
}
}
})();
/**
* 将十六进制颜色转换为RGB格式
* @param {string} hex 十六进制颜色值
* @return {string} {r, g, b} 返回最终结果
*/
function hexToRgb(hex) {
// 去掉可能的#字符
hex = hex.replace(/^#/, '');
// 如果是缩写形式的颜色值（如 #FFF），则将其扩展为完整形式
if (hex.length === 3) hex = hex.replace(/(.)/g, '$1$1');
// 解析RGB值
let bigint = parseInt(hex, 16),
r = (bigint >> 16) & 255,
g = (bigint >> 8) & 255,
b = bigint & 255;
return { r, g, b };
}
/**
* 两种颜色相减后的值
* @param {string} color1 颜色1(主颜色，一般是大值)
* @param {string} color2 颜色2
* @return {object} { hexadecimal, rgb } 返回十六进制和rgb值
*/
function subtractColors(color1, color2) {
let rgb1 = hexToRgb(color1),
rgb2 = hexToRgb(color2),
r = rgb1.r - rgb2.r,
g = rgb1.g - rgb2.g,
b = rgb1.b - rgb2.b,
reslut = (val) => Math.max(0, val);
// 将RGB结果转换为十六进制格式
return {
hexadecimal: `#${(1 << 24 | reslut(r) << 16 | reslut(g) << 8 | reslut(b)).toString(16).slice(1)}`,
rgb: `${r}, ${g}, ${b}`
};
}

---

关键代码

new EyeDropper();

---

EyeDropper

MDN

安全上下文: 此项功能仅在一些支持的浏览器的安全上下文(HTTPS)中可用。

---

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

---

EyeDropper接口表示一个拾色器工具的实例，用户可以打开并使用它从屏幕上选择颜色。

---

try…catch

w3school

定义和用法
try/catch/finally语句处理代码块中可能发生的部分或全部错误，同时仍在运行代码。
错误可能是程序员造成的编码错误、错误输入导致的错误以及其他不可预见的情况。
try语句允许您定义要在执行时测试错误的代码块。
如果try块中发生错误，catch语句允许您定义要执行的代码块。
finally语句允许您在try和catch之后执行代码，而不管结果如何。
注释：catch和finally语句都是可选的，但是在使用try语句时需要使用其中之一（如果不是同时使用）。
提示：当发生错误时，JavaScript通常会停止，并生成错误消息。请使用throw语句创建自定义错误（抛出异常）。如果将throw与try和catch一起使用，则可以控制程序流并生成自定义错误消息。
有关JavaScript错误的更多知识，请学习JavaScript错误教程。

---

MDN

try...catch语句标记要尝试的语句块，并指定一个出现异常时抛出的响应。

---

颜色值相减(色差)的传送门

JavaScript实现十六进制色差功能、十六进制颜色相减、replace、parseInt、max、toString、slice