electron实现取色器功能

检查事项

淘宝镜像过期

在 2024年1 月 22 日，淘宝原镜像域名（registry.npm.taobao.org）
的 HTTPS 证书正式到期。如果想要继续使用，需要将 npm 源切换到新的源（registry.npmmirror.com），否则会报错

npm config set registry https://registry.npmmirror.com
npm config get registry

安装robotjs

一开始用 eletron 10.1.5 node 12.16.3 ，怎么试都会报错，后面就一直换版本；而且因为 electron 还内置了一个 node ，有时候cmd安装和rebuild所需要的python一个是2一个是3，真的疯了

本来想用 iohook 做全局的鼠标监听，升级node清缓存rebuild各种方法都试了个遍，一版装上了，但 robotjs 又装不上了，最后因为版本冲突放弃了 iohook

本次演示所用 electron 版本为 v26.6.10，node 版本 18.16.1

*依赖

报错：操作指南

• 一键到位：

  npm install --global --production windows-build-tools
  

  不知道为啥装不上，算了分步自己装吧

• 少python：安装python（报错让装哪个版本就装哪个，node版本旧一点的是python2.7，新的一般都要求python3）

• 少vs，安装c++vs studio：

  装了还找不到，就挨个加环境变量，参考：https://blog.csdn.net/qq_36888550/article/details/133287592

  npm config set msvs_version 2017 --global
  set VCINSTALLDIR D:\Program Files\Microsoft Visual Studio\2017\Community\Common7
  

  set不行就直接改环境变量：VCINSTALLDIR [Visual Studio安装路径]

  验证：

  npm config get msvs_version
  echo %VCINSTALLDIR%
  

命令

//终端敲命令安装node
nvm uninstall 12.16.3
nvm install 18.16.1
nvm use 18.16.1

cd D:\Go\src\practice\playv3\donut-client
npm i robotjs//报错了 装py3就正常了

//electron 的 scripts 里写脚本 rebuild 达成版本一致（没用）
"rebuild": "npm rebuild --runtime=electron --target=18.16.1 --disturl=https://atom.io/download/atom-shell --abi=116"

//https://www.jianshu.com/p/cc7f24f324ae 有用！！！
npm install electron-rebuild
./node_modules/.bin/electron-rebuild

remote被弃用

更换高版本后发现remote被弃用：参考https://blog.csdn.net/qq_39077394/article/details/125667918

主进程：

const remote = require("@electron/remote/main")
//创建主窗口后引入remote
remote.initialize()
remote.enable(mainWindow.webContents)

渲染进程：

const remote = require('@electron/remote')

原生被禁用

在渲染进程中引robotjs包直接报错：

Error: Loading non-context-aware native module in renderer:

app.allowRendererProcessReuse = false;

完全没用，用双通信吧

robotjs双通信实现

主程序引入包：

// 检测颜色
ipcMain.on('get-color', (event, arg) => {
        let mouse = robotjs.getMousePos();
        let hex = "#" + robotjs.getPixelColor(mouse.x, mouse.y);
        event.reply("color", hex);
})

渲染进程：

// 显示弹窗 & 监听关闭按钮 & 取色器
function colorPopup() {
    // 显示弹窗
    document.getElementById('popup2').style.display = 'block';
    // 暂存原颜色
    let bg=document.body.style.backgroundColor;
    let fontcolor=document.body.style.color;
    // 暂存阅读滚动条
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
    let readHeight = (scrollTop * 1.00)/scrollHeight
    // 修改背景为全透明
    document.body.style.backgroundColor = 'rgba(255, 255, 255, 0)';
    document.getElementById("total-content").style.display='none'

    // 监听关闭按钮
    document.getElementById('close2').addEventListener('click', (e)=> {
        // 隐藏弹窗
        e.stopPropagation();
        document.getElementById('popup2').style.display = 'none'
        // 清空输入框
        document.getElementById('colorName').value = ''
        document.getElementById('codeHEX').value = ''
        document.getElementById('color').style.backgroundColor = '';
        // 恢复原色
        if (document.body.style.backgroundColor==='rgba(255, 255, 255, 0)'){
            document.body.style.backgroundColor=bg
        }
        document.getElementById("total-content").style.display='block'
        //阅读滚动条
        let scrollHeight2 = document.documentElement.scrollHeight || document.body.scrollHeight
        document.documentElement.scrollTop  = 1.00*readHeight*scrollHeight2
    })

    // 吸色笔
    let selector = document.getElementById('selector');
    // 监听按钮的点击事件
    selector.addEventListener('click', async () => {
        // 修改鼠标样式
        document.body.style.cursor = "crosshair"
        // 获取颜色
        setTimeout(() => {
            window.onclick=function(event) {
                // 清除点击事件
                window.onclick=null
                // 发送获取颜色的指令
                ipcRenderer.send('get-color');
                // 接收返回的颜色并写入
                ipcRenderer.on("color",(event,args)=>{
                    document.getElementById('color').style.backgroundColor = args;
                    document.getElementById('codeHEX').value = args;
                })
                // 修改鼠标样式
                document.body.style.cursor = "default"
            }
        }, 100);
    });
}

逻辑框架

点击取色按钮后，将弹窗背后的窗体内容全部隐藏，并设置为透明色背景

html

<!--吸色器弹窗-->
<div id="popup2">
    <div class="popup-color">
        <div id="popup2-div">
            <div id="close2">✖️</div>
            <button id="selector">点击取色</button><div id="color"></div>
            <p>颜色代码：<input id="codeHEX" type="text" class="color-input">&nbsp;&nbsp;<button id="change-color">修改</button></p>
            <p>颜色名称：<input id ="colorName" type="text" class="color-input">&nbsp;&nbsp;<button id="save-color">保存</button></p>
        </div>
    </div>
</div>

js

// 初始化背景子菜单
let bgMenu = new Menu();
//读取色卡
let bgData = JSON.parse(fs.readFileSync(bgPath, 'utf8'));
for (let i = 0; i < bgData.length; i++) {
    // 添加到子菜单
    bgMenu.append(new MenuItem({
        label: bgData[i].colorName,
        click: function () {
            document.body.style.backgroundColor = bgData[i].codeHEX;
        }
    }))
}
bgMenu.append(new MenuItem({
    label: "更多",
    click: function () {
        // 显示弹窗 & 监听关闭按钮 & 退出时刷新 & 取色器
        colorPopup()

        // 改色
        let bgChange = this.document.getElementById('change-color');
        bgChange.onclick = function () {
            //改变背景颜色
            document.body.style.backgroundColor = document.getElementById('codeHEX').value;
        }

        // 保存
        let bgSave = this.document.getElementById('save-color');
        bgSave.onclick = function () {
            //遍历查找：存在则直接返回
            for (let i = 0; i < bgData.length; i++) {
                if (bgData[i].codeHEX === document.getElementById('codeHEX').value) {
                    return
                }
            }
            //没查到：则添加新颜色
            let newColor = {
                colorName: document.getElementById('colorName').value,
                codeHEX: document.getElementById('codeHEX').value,
            }
            bgData.push(newColor)
            //保存在本地json
            fs.writeFileSync(bgPath, JSON.stringify(bgData, null, '\t'));

            // 添加到右击菜单
            bgMenu.insert(bgMenu.items.length-1,new MenuItem({
                label: newColor.colorName,
                click: function () {
                    document.body.style.backgroundColor = newColor.codeHEX;
                }
            }))
        }
    }
}))
menuBg = new MenuItem({
    label: '背景',
    type: 'submenu',
    submenu: bgMenu
})

其他吸色管实现方案一览

• <input type=‘color’>：不同浏览器样式不同
  chorme浏览器效果（左） & electron6.1.12效果（右）
  
  但我后来发现只要升级electron就可以支持了。。。不过太占地方了，对所需功能来讲过于冗余
  

   <input id="selector" type='color'>
  

   // 吸色笔
   let selector = document.getElementById('selector');
    selector.addEventListener('input', function (){
        //显示颜色的值
        document.getElementById('codeHEX').value = selector.value;
    });
  

• IEyeDropper API：从Chrome 95才开始支持，这个贼简洁，如果electron不支持就升级

// 吸色笔
if ('EyeDropper' in window) {
    // 初始化一个EyeDropper对象
    const eyeDropper = new EyeDropper()
    // 监听按钮的点击事件
    let selector = document.getElementById('selector');
    selector.addEventListener('click', async () => {
        try {
            document.body.style.backgroundColor = 'rgba(255, 255, 255, 0)';
            document.getElementById('popup2').style.display = 'none';
            const result = await eyeDropper.open() // 开始拾取颜色
            //显示颜色的值
            document.getElementById('popup2').style.display = 'block';
            document.getElementById('color').style.backgroundColor = result.sRGBHex;
            document.getElementById('codeHEX').value = result.sRGBHex;
        } catch (e) {
            console.log('用户取消了取色')
        }
    })
}else {
    console.log('取色器不可以使用')
    document.getElementById('selector').style.display = 'none';
}

• TouchBarColorPicker：electron自带的，但是mac触控端

• robotjs：参考从零写取色器 的简略说明