electron 剪贴板 截图_利用 Electron 开发快速截图工具（二）

利用 Electron 开发快速截图工具(二)

上一篇我们讲到主界面开发完成，这一篇我们讲子界面的开发。

子界面的生命周期比较短，罗列如下：

窗口打开并显示截图；

用户截图点击确定后，发送截图数据至主进程；

主进程关闭子界面。

我们来看看子界面中的一个个功能是如何实现的。

子界面中元素

canvas 元素

我选用了 canvas 作为截图的容器，主要是考虑到后续用户划取选区时比较方便。

DIV 难以实现遮罩中的选区透明的效果；

DIV 在从右至左，从下至上划取选区时需要不断的计算起始点坐标(左上角为起始点)。

按钮元素

子界面中有三个按钮：

确定按钮：保存截图至剪贴板，并关闭子界面；

保存按钮：保存截图为文件，并关闭子界面；

关闭按钮：关闭子界面。

子界面的打开与关闭

之前我们提到直接在主界面调用 window.close() 关闭窗口，但这会在子界面中引起报错：

Uncaught RangeError: Maximum call stack size exceeded

在 Electron 教程中提到了一点，在网页中调用 GUI API 很危险，