在nodejs中集成electron+robotjs+opencv4nodejs

在这几天一直想做一个桌面版的可视化脚本程序，自然而然就想到了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))

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))中的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 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		hello
	</body>
</html>

最后执行npm start发现鼠标成功移动到对应位置，并且打印出图片信息

好的这样我们就成功集成好了electron+robotjs+opencv，希望这篇文章可以帮到你！