在这几天一直想做一个桌面版的可视化脚本程序，自然而然就想到了electron+robotjs+opencv4nodejs的这三个模块，但是在真正使用的时候，可谓是一个坑都没落下，所以赶紧写一下，避免再次踩坑。
首先是要安装electron [可以参考官网文章](安装指导 | Electron (electronjs.org))
安装好了之后在package.json 的script添加 "start": "electron ."
其次是安装robotjs 这时候坑就来了，robotjs需要你的电脑中有python 环境，如果有环境就可以执行 npm install robotjs安装好了
最后安装@u4/opencv4nodejs（opencv4nodejs不再维护）,又一个坑，建议各位要装这个模块的时候，先在自己的设备中安装好opencv并配置好环境，并且需要在系统变量下配置下图4个变量
同时还需要npm安装windows-build-tools ,如果电脑有vs就可以忽略
还需要在package.json中进行配置
package.json
"scripts": {
"install_arm64": "build-opencv --version 4.5.4 --flag=\"-DCMAKE_SYSTEM_PROCESSOR=arm64 -DCMAKE_OSX_ARCHITECTURES=arm64\" build",
"install_4.5.5_cuda": "build-opencv --version 4.5.5 --flags=\"-DWITH_CUDA=ON -DWITH_CUDNN=ON -DOPENCV_DNN_CUDA=ON -DCUDA_FAST_MATH=ON\" build",
"do-install": "build-opencv build"
}
"opencv4nodejs": {
"disableAutoBuild": 1,
"opencvIncludeDir": "D:\\opencv\\opencv\\build\\include",
"opencvLibDir": "D:\\opencv\\opencv\\build\\x64\\vc16\\lib",
"opencvBinDir": "D:\\opencv\\opencv\\build\\x64\\vc16\\bin"
}这里的目录是你在系统变量中配置的目录
然后再执行 npm install @u4/opencv4nodejs 成功
electron与robotjs集成
这里我使用的方法是参考官网的文章\]([Node 原生模块 \| Electron (electronjs.org)](https://link.juejin.cn?target=https%3A%2F%2Fwww.electronjs.org%2Fzh%2Fdocs%2Flatest%2Ftutorial%2Fusing-native-node-modules "https://www.electronjs.org/zh/docs/latest/tutorial/using-native-node-modules")) ```bash npm install --save-dev @electron/rebuild # Every time you run "npm install", run this: ./node_modules/.bin/electron-rebuild # If you have trouble on Windows, try: .\node_modules\.bin\electron-rebuild.cmd ``` 先安装@electron/rebuild,然后在安装robotjs之后执行`.\node_modules\.bin\electron-rebuild.cmd` **这个重建会比较快，执行之后就可以在electron的main.js引入robotjs了**(注意:在electron中使用robotjs的screen会导致程序强制退出，好像是触发了electron的沙盒安全问题) #### electron与@u4/opencv4nodejs集成 用上面的方法rebuild会报错，推荐方法\[参考\]([@u4/opencv4nodejs - npm (npmjs.com)](https://link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40u4%2Fopencv4nodejs%3FactiveTab%3Dreadme "https://www.npmjs.com/package/@u4/opencv4nodejs?activeTab=readme"))中的Usage with Electron 在package.json的script中配置 `"electron-rebuild": "build-opencv --electron --version 4.5.4 build"` 然后执行 `npm run electron-rebuild`这个过程会花费一些时间，大概需要10分钟左右 控制台输出上图就是重建成功了 最后我们测试一下在electron的mian.js中使用这两个模块 ```main.js const {app,BrowserWindow} = require('electron'); const path = require('node:path'); //引入模块 const robot = require('robotjs'); const cv=require('@u4/opencv4nodejs'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, preload: path.join(__dirname, 'preload.js') } }); win.loadFile('index.html'); //下面代码会用到对应模块 robot.moveMouse(100,100); robot.keyTap("enter"); const t=cv.imread('btn.png'); console.log(t); } app.whenReady().then(createWindow); ``` ```index.html