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

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

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

子界面的生命周期比较短,罗列如下:

窗口打开并显示截图;

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

主进程关闭子界面。

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

子界面中元素

canvas 元素

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

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

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

按钮元素

子界面中有三个按钮:

确定按钮:保存截图至剪贴板,并关闭子界面;

保存按钮:保存截图为文件,并关闭子界面;

关闭按钮:关闭子界面。

c69db1902792c969e3d8bdc1ea19baa9.png

子界面的打开与关闭

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

Uncaught RangeError: Maximum call stack size exceeded

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值