electron实现截图(一)

本文介绍了在 Electron 中实现截图的三种方法,重点讲解了第三种方式:先全屏截图,再新建窗口作为背景,利用前端库进行定制化截图。这种方式虽然有延迟,但能自定义样式。步骤包括使用 desktopCapturer 截图,新窗口加载背景图片,使用 js-web-screen-shot 进行页面截图,并在回调中关闭窗口,最后删除临时图片。文章还将分享具体代码和在微信公众号上的后续内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在electron中实现截图有以下几种方法,接下来文章主要介绍的是第三种,也是我实际用的有一定开发成本但是很简单:

1.通过外部的工具进行截图;优点:代码逻辑少,基本没有开发成本;缺点:工具不好找,无法自定义工具栏样式,因为底层封装好的没法改css。

2.创建新窗口,用canvas绘制画布,进行截图,一一实现工具栏每个功能;优点:自已动手,相当灵活;缺点:代码多难写。

3.先截一张全屏的图,然后新建一个窗口将截好的图作为这个窗口页面的背景图片,通过前端的方法(有依赖)对这个页面进行页面的截图;优点:代码简单,因为截图依赖是前端的可以修改css,包括工具栏小图标之类的;缺点:由于实际先进行了一次截图并且加载到页面背景图片,所以有一定延迟。

思路:

1.通过desktopCapturer进行桌面截图,将图片放到指定目录;

2.打开新窗口,加载指定目录图片作为整个窗口页面背景,新窗口设置最大宽高,不可缩放,并且要覆盖windows底部任务栏。

3.图片加载好后通过前端依赖js-web-screen-shot对页面进行截图,记得要等图片加载好后调用截图方法不然截的就是空白的,这个依赖有确认取消回调,回调里面关闭窗口,关闭窗口时记得检查里面有没有进行监听的一些方法,记得移除,不然会报主进程的错误。

4.截图好之后记得将第一步生成的图片删掉,不然会占据空间。

5.此时图片就截好了,可以到qq或者微信的输入框或者富文本里面粘贴一下,看看效果,如果要在自己的项目里面显示的话还需要封装输入框,封装输入框的话会在之后的文章讲到。

具体的代码会在下一篇文章贴出来以及讲解,也会发布在我的微信公众号:程序猿wwtx。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值