electron实现截图（一）

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

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

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

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

思路：

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

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

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

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

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

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

electron实现截图（一）相关推荐

electron 剪贴板截图_electron屏幕截图功能
使用electron开发桌面应用,难免会遇到需要截图的功能,通常来说在electron中截图的方式有三种: 一.使用内置API(desktopCapturer)进行截图首先引入desktopCapt ...
electron 剪贴板截图_用electron开发了一个屏幕截图工具
前段时间做了一个钉钉的Linux版本,由于是基于网页版做的,所以缺失了很多桌面应用程序的功能.由于使用的用户多是Linux的用户,所以在Linux的截图功能没有,在几个用户的要求下决定做一个截图功能. ...
electron 实现截图功能
实现方式:引入第三方exe,然后调用. 创建一个新的electron项目,把下方代码复制带main.js // Modules to control application life and crea ...
使用 Vue 和 Electron 开发一款简单的 Markdown 编辑器
2021SC@SDUSC 本文并不涉及自己设计一套 Markdown 渲染组件的部分,Markdown 渲染组件可通过 marked 和 highlight.js 自行实现.但本文重点在于如何使用 E ...
android仿微信图片编辑器,electron/vue可编辑框contenteditable|仿微信截图
基于Electron+vue实现div可编辑contenteditable插入表情|electron-vue截图功能为了避免使用 vue 手动建立起 electron 应用程序.electron-v ...
electron仿微信截图工具（初学者的尝试笔记）
刚刚学习election,心血来潮做些小工具,工具包含常用的矩形.椭圆框线,箭头绘制,笔刷以及文字. 支持框选截图范围后拖动以及裁剪. 大多都是查找网上大佬提供的思路,其中箭头绘制来自大佬代码魔改如何 ...
关于electron的2种截图方式详解
第一种方式: 1.采用第三方现有截图工具,添加dll和exe文件 2.引入需要的模块 // 快捷键模块 const { globalShortcut } = require('electron'); ...
Electron 截图踩坑和优化集合
上一篇文章<从零开始用 electron 手撸一个截屏工具>发布之后发现阅读的朋友还不少,不过工具真正使用的时候就发现了问题,所以为了让我们的截图工具更好用,就又做了很多优化,当然了也遇到 ...
JS可以写操作系统？Windows 95被装进Electron App
什么是Windows 95? \\ 这个Windows 95是微软的那个操作系统吗?可以说是,也可以说不是.它实际上是一个Electron app,可以运行在Windows.macOS和Linux上. ...

electron实现截图（一）

electron实现截图（一）相关推荐

最新文章

热门文章