electron实现截图（一）

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

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

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

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

思路：

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

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

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

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

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

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