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