徒手从零实现 uTools 系列（三）- 屏幕取色和截屏

前言

为了进一步提高开发工作效率，最近我们基于 electron 开发了一款媲美 uTools 的开源工具箱 rubick。该工具箱不仅仅开源，最重要的是可以使用 uTools 生态内所有开源插件！这将是巨大的能力，意味着 uTools 生态内所有插件可以无差异化使用到 rubick 中。

设计交互上为了更能提高用户的使用效率，我们又尝试去实现了 uTools 中非常优秀的一些设计，比如：全局取色和截屏。全局取色在获取一些图片、其他App应用的颜色时非常有用。截屏虽然可以使用钉钉或者微信自带的截图功能，但是为了更加符合 uTools 用户习惯，我们也顺便实现了一下。

接下来进入主题，我们来基于 rubick 来一步步实现一个取色和截屏能力。

代码仓库

Rubick github

功能演示：

实现取色

要实现屏幕取色能力，主要核心能力步骤如下：

1. 跟随鼠标移动，获取当前屏幕鼠标位置
2. 获取当前坐标的颜色

1. 获取鼠标移动的坐标

要获取系统鼠标移动的坐标，electron 本身没有提供相关的函数和能力，所以要实现跟随获取系统鼠标位置，可能要调用原生能力。好在有一个 iohook 这样一个强大的系统调用工具，可以帮助我们监听系统鼠标操作以及按键操作。所以我们可以基于 iohook 来实现位置坐标获取。在 electron 中按照 iohook，在 npm install iohook 之前，需要在 package.json 中配置：

"iohook": {
  "targets": [
    "node-72",
    "electron-85"
  ],
  "platforms": [
    "win32",
    "darwin",
    "linux"
  ],
  "arches": [
    "x64",
    "ia32"
  ]
}

后面在 install 的时候会为我们按照所需下载通过 node-gyp 编译好的 node 可调用的包。如果需要重新编译，需要再重新执行命令：

"rebuild": "npm rebuild --runtime=electron --target=5.0.0 --disturl=https://atom.io/download/atom-shell --abi=80"

具体需要哪个版本的 node 和 electron 可以参考这篇文章

准备工作做完之后，接下来就是调用 iohook 获取鼠标移动位置：

 ioHook.on('mousemove', ({x, y}) => {
  // todo
})

2. 获取当前坐标位置颜色

这里，需要利用到另一个库 robotjs，该库提供了强大的系统操作能力，最最最重要的是他可以获取到像素点的色彩，这就很关键了。这个正好是我们需要的：

 let color = "#" + robot.getPixelColor(parseInt(x), parseInt(y));

到这里就基本上完成了。

另一种实现方案

上面是一种比较常规的做法，但除了上面的方式，还有没有其他的方式呢？当时我也想了很久，后来仔细想想，electron 虽然获取不到系统鼠标位置和点击以及系统级别的像素，但是如果我们的屏幕本身就是一个 electron 的 browserWindow 那就可以通过 DOM 来实现啦！

确实这是一个思路，核心步骤拆解下来就是：

1. 根据当前显示器个数渲染对应个数 browserWindow
2. 每个 browserWindow 尺寸设置成透明全屏的
3. 获取每个 screen 的全屏截图
4. 绘制截图到 browserWindow 的 canvas 上
5. 从系统级操作转成 electron 内部操作

具体的实现方式这里就不细说，因为下面截屏采用的就是这种方案。

实现系统截屏

系统截屏就可以参考上面所述，采用分屏渲染子窗口，再操作子窗口的方式来实现，这里我也是参考了：从零开始用 electron 手撸一个截屏工具 。

最后

本篇主要介绍如何实现一个类似于 utools 的取色、截屏能力，当然这远远不是 utools 的全部，下期我们再继续介绍如何实现 utools 其他能力。欢迎大家前往体验 Rubick 有问题可以随时提 issue 我们会及时反馈。

另外，如果觉得设计实现思路对你有用，也欢迎给个 Star：https://github.com/clouDr-f2e/rubick