electron实现取色器功能

胡萝卜是可爱的颜色

已于 2024-03-15 16:48:52 修改

阅读量1.2k

点赞数 23

文章标签： electron javascript 前端

于 2024-03-15 16:31:58 首次发布

本文链接：https://blog.csdn.net/jinqingjianghai/article/details/136739352

版权

本文讲述了淘宝镜像HTTPS证书到期后的解决方案，包括切换npm源、安装Node和electron版本更新、解决依赖问题，以及在electron中处理remote、native模块和颜色取色器的迁移和兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

检查事项

淘宝镜像过期

在 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'

最低0.47元/天解锁文章