使用Electron开发一个吸色工具的心路历程

为何要(zuo)

”世界上只有一种英雄主义，那就是认清本身的发际线以后依然热爱撸码“ -- 欧大强·罗兰

Electron是一个很是有趣的开源项目，“它可让你使用纯 JavaScript 调用丰富的原生(操做系统) APIs 来创造桌面应用”。光看这官方简介就让人不住跃跃欲试，再加上市面上没找到能让我中意的桌面吸色工具，因此我决定使用Electron来开发一款。
下载地址:

• windows
• Mac

需求与界面

个人软件，界面必定要好看，LOGO必定要大气，主色调要那种低沉性感又不失庄重，气势磅礴的黑。

(献丑了。果真设计师不是随便就能作的)

功能大体包括如下几点

• 支持快捷键操做并可自定义。
• 有历史选色记录。
• 能自由切换色值。
• 在已知透明度和背景色的条件下计算出当前取色器的rgba色值。
• 支持最小化到托盘

基本思路

Electron没有API能够直接拿到当前指针所在位置的色值，可是提供了获取桌面资源的方法。在执行取色操做时使用desktopCapturer将当前桌面截图，而后在canvas上展现并使用getImageData() 获取指定色值。Easy。

遇到的问题

关于Electron的介绍网络有不少，上手难度也不算高，线程之间的关系与操做还有API文档写的很是详细，但这不意味着你(zuo)起来就能一路顺风了。

Global变量没法获取

经过ipc和global咱们很容易就能实现一个简易的状态管理机制，在这里我碰到了第一个坑。
由于remote复制对象而不是提供引用，因此在渲染进程中操做的global对象须要提早在主进程中定义初始值。
main process:

global.sharedObj = {prop1: null};
复制代码

renderer process:

remote.getGlobal('sharedObj').prop1 = 125;
复制代码

使用desktopCapturer截图有色差

经过desktopCapturer.getSources()API咱们能够获得一个DesktopCapturerSource对象，再配合getUserMedia咱们能够很方便的获取当前可用资源。

// In the renderer process.
const { desktopCapturer } = require('electron')

desktopCapturer.getSources({ types: ['window', 'screen'] }, (error, sources) => {
  ...
  navigator.mediaDevices.getUserMedia({
    ...
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: sources[0].id,
        ...
      }
    }
  }).then((stream) => {
    const video = document.querySelector('video')
    video.srcObject = stream
  }).catch((e) => ...)
})

复制代码

以上是官方给的使用文档，将video的第一帧绘制到canvas上便成功对当前桌面进行截图。但事情并无这么简单，在我阅片无数的双眼下，任何细微的差异都无处遁行，使用getUserMedia获得的图像居然有色差

我测算了一下，截图获得的图片和原图相比，绿色通道的值要高一些，因此我猜想形成色差的缘由多是因为浏览器使用的是 sRGB色域，而显示器使用的是aRGB色域(但愿有大佬能帮忙指正)。
虽然经过 DesktopCapturerSource对象上的 thumnail(NativeImage)能直接获得当前桌面的缩略图(截图)而且没有色差， 可是desktopCapturer在工做中是会阻塞进程的，不推荐直接经过 thumnail来获取百分百比例的桌面截图。因此最后我选择使用 desktop-screenshot这个第三方node库来实现截图步骤。

写入文件路径报错

我使用了lowdb这个node库来储存设置的快捷键和历史色值，开发的时候一切正常，可打包后在Mac上运行起来就会报错EROFS: read-only file system

未签名的app彷佛在mac上很不招待见，好在Electron提供了 app.getPath(name)来获取文件路径的，咱们没法肯定用户会将软件放到哪一个目录，因此我建议将须要被修改的文件放入系统文件夹或临时文件夹。

app.getPath(name) // Electron
  or
  os.tmpdir() // node原生模块得到临时文件路径
复制代码

打包优化

除了尽量减小dependencies的依赖以外，基本无解。别问，问就是100M起。

结尾

虽然这是一个简单的项目，还有不少没来得及深刻发掘。
虽然常伴小坑，但总的来讲瑕不掩瑜，体验仍是至关到位的。 若是你也想体验一把桌面应用开发，Electron是个很是靠谱的选择。
github

参考资料:

• Electron文档