electron截图功能添加截图时隐藏窗口选项

最新推荐文章于 2024-02-23 22:08:39 发布
最新推荐文章于 2024-02-23 22:08:39 发布
阅读量617 收藏 1
点赞数
分类专栏： 截图窗口显示隐藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42428904/article/details/117553811
版权

electron截图功能添加截图时隐藏窗口选项

截图功能实现

参照大佬的代码：https://juejin.cn/post/6844903687706378247
优化过程：https://juejin.cn/post/6844903697705598983
源码GIT地址：https://github.com/chrisbing/electorn-capture-screen

添加截图时显示隐藏窗口功能

1.首先要在自己的主窗口中添加选择按钮
在这里插入图片描述
2.在截图点击事件中，判断是否隐藏窗口状态值，决定是否调用main.js里面主窗口的.hide()隐藏

截图触发判断js：
在这里插入图片描述
main.js
在这里插入图片描述
3.退出截图时显示主窗口

在所有关闭截图窗口时要调用主窗口.show()方法进行显示
在这里插入图片描述

qq_42428904
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用electron实现百度网盘悬浮窗口功能的示例代码
10-17
主要介绍了使用electron实现百度网盘悬浮窗口功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
electron+vue实现div contenteditable截图功能
10-15
主要介绍了electron+vue实现div contenteditable截图功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
ScreenCapture
zz_coding
03-10 2585
只有两个静态方法 ScreenCapture.CaptureScreenshot 注意 1、文档中说的是在 Application.persistentDataPath，然而win10的unity编辑器中测试，是在和 Assets文件夹同一级的 2、文档中的示例不需要文件后缀自动保存为PNG文件，但测试结果是必须要有 后缀.png，否则没文件类型 3、测试发现也可以指定为其他文件类型...
Electron打造你自己的录屏软件
weixin_42684490的博客
02-23 911
至此，我们就实现了自己的一个录屏小工具。
Chrome命令行开关
小龙在线
08-15 3026
设置客户端的证书文件 path .
electron-vue-screen-capture
05-19
电子视屏捕获 基于电子和VUE的屏幕捕获 用法 // install npm install electron - vue - screen - capture - S // config in vue.config.js pluginOptions: { electronBuilder : { builderOptions : { extraResources : [ { from : 'node_modules/electron-vue-screen-capture/dist_electron/bundled/' , to : './screen-capture' } ] } } } // use import { init , start , close , targetWin } from 'ele
electron实现屏幕截图
陌子曦的专栏
08-23 1999
electron实现屏幕截图功能
【Electron-Vue】构建桌面应用（40）- Electron程序未响应
chenqk_123的专栏
07-14 2043
在使用到Electron-vue开发桌面应用时，出现一个很头疼的问题，就是程序未响应。 具体问题描述：Electron程序调用hide隐藏后，当Electron应用长时间运行后，点击托盘图标调用show函数显示应用面板，会出现未响应的情况，并且会同时获取到焦点，导致其他应用无法获取鼠标的焦点，无法进行其他操作，整个系统处于无法操作的情况。 关于问题的出现目前是在windows下，不确定是Electron的问题，还是系统的问题，但是出现评率很高，几乎试用的同时都出现过长时间挂起，程序未响应的问题。而我本机
Electron那些事07：窗口定制
uikoo9的专栏
03-23 2184
【前言】 之前章节简单介绍了窗口，本节介绍一下窗口定制， Electron那些事03：渲染界面_uikoo9的博客-CSDN博客 【默认窗口】 接之前的例子，可以看到mac上默认窗口会有一个标题栏， 但是实际开发中基本没有这种默认的标题栏 【无边框窗口】 第一种方式是为window添加frame属性，设置为false，这样就是无边框窗口了 效果如下 【设置标题栏样式】 上述效果可以看到左上角的关闭按钮也没有了，这个不是想要的效果 另一个方式是设置标题...
Electron 应用实现截图并编辑功能
Talk is cheap, show the code.
08-12 1859
Electron 应用如何实现截屏功能，有两种思路，作为一个框架是否可以通过框架实现截屏，另一种就是 javaScript 结合 html 中画布功能实现截屏。 在初步思考之后，本文优先探索使用 Electron 实现截屏功能。作为一个成熟的框架，如果能够完成截屏，那自然是已经考虑了各种会出现的问题。 Electron 想要截屏还是要用到 desktopCapturer API。这个 API 也是用来实现录屏。
electron实现类似QQ窗口靠边自动边缘隐藏
07-20
最近做了一个electron+vue的项目，需要实现类似QQ边缘自动隐藏的功能。 一开始想到的是通过页面的mouseout、mouseenter、mouseleave等方法实现，通过查找了很多资料，发现这几个方法只能实现一些比较简单的交互，...
electron 的一个截图插件工具
08-14
electron 的一个截图插件工具，类似QQ截图.............................
唱片桌面：使用Electron构建Linux上的轻松GIF和屏幕截图
02-04
记录桌面记录gif并在用电子构建的... 截屏通过热键拍摄区域或活动窗口的屏幕截图（使用macOS，例如shadow- ）。 获取复制到剪贴板的屏幕截图。 将其粘贴到浏览器的输入中。 预览图库上载到imgur 所有文件都保存在可自定
Electron屏幕截图的技术方案Mac&Windows
华章IT官方博客
11-08 2038
导读：Electron比你想象的更简单也比你想象中更强大！如果你可以建一个网站，你就可以建一个桌面应用程序。Electron 是一个使用JavaScript, HTML和CSS等Web技...
使用electron-screenshots插件实现electron+vue3+vite项目截图功能
九段刀客的博客
09-02 2714
electron实现微信截图的功能
Electron常见问题 24 - 如何隐藏任务栏窗口（windows and mac）
liuzhen007的专栏
08-27 6412
目录 问题 解决 问题 如果我们在electron工程中创建了多个BrowserWindow对象，那么在windows的任务栏和mac的程序坞中就会出现多个缩略图窗口并排，非常影响美观。mac的话还能接受，但是windows的话，让人忍不了。 那么怎么解决解决这个问题呢？ 解决 windows系统中electron的多窗口实例截图： 除了自己的主窗口还有四个其他窗口，看着真的不爽！ 那怎么能让他们不显示呢？ 那就是 win.setSkipTaskbar() 。 方法原型：...
Electron截屏功能
qq_41662119的博客
04-21 2000
# Electron截屏功能 window下增加该功能，可以调用三方的exe文件然后通过node.js的原生模块，execFile启动该exe文件。 mac下则可以通过screencapture 来调用系统的截屏功能来实现 globalShortcut.register('CommandOrControl+Alt+Z', function () { if (process.p...
用Vite+Electron搞个微信截图工具（区域截屏工具）
creen027的博客
07-13 539
文章写到这里基本结束了，简单回顾下文章的内容。Q:为什么没有用?一开始我是使用，但是最后放弃了，原因有两个：1. 编译太慢，不知道是不是webpack的原因，但是和vite比真的太慢了！！！2.使用的是打包，也不太自定义，所以最后放弃。。Q: 有源码吗？，有兴趣的话可以大家一起探讨，同时也欢迎大家fork和star。
JavaScript_构建您的第一个移动应用程序.zip
最新发布
05-20
JavaScript
用electron语言编写一个屏幕截图功能
09-20
### 回答1： Electron 是一种基于 Web 技术（JavaScript、HTML 和 CSS）的跨平台桌面应用程序开发框架，可以使用它来开发功能丰富的跨平台桌面应用程序。下面是使用 Electron 实现屏幕截图功能的简单示例： 1. 创建一个新的 Electron 项目： ``` mkdir screenshot-app cd screenshot-app npm init -y npm install --save electron ``` 2. 在项目根目录下创建一个 `main.js` 文件，用于启动 Electron 应用程序。在这个文件中，我们将创建一个 Electron 窗口，包含一个按钮，点击该按钮将触发屏幕截图操作： ```javascript const { app, BrowserWindow, globalShortcut, ipcMain } = require('electron') const path = require('path') const { desktopCapturer, screen } = require('electron') let mainWindow = null function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false } }) mainWindow.loadFile('index.html') mainWindow.on('closed', function () { mainWindow = null }) globalShortcut.register('CommandOrControl+Alt+D', () => { captureScreen() }) } function captureScreen() { desktopCapturer.getSources({types: ['screen']}, (error, sources) => { if (error) throw error for (let i = 0; i < sources.length; ++i) { if (sources[i].name === 'Entire screen') { navigator.mediaDevices.getUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: sources[i].id, minWidth: 1280, maxWidth: 1280, minHeight: 720, maxHeight: 720 } } }) .then((stream) => { const video = document.createElement('video') video.srcObject = stream video.onloadedmetadata = () => { const canvas = document.createElement('canvas') canvas.width = video.videoWidth canvas.height = video.videoHeight const ctx = canvas.getContext('2d') ctx.drawImage(video, 0, 0, canvas.width, canvas.height) const dataURL = canvas.toDataURL('image/png') mainWindow.webContents.send('screenshot', dataURL) video.remove() stream.getTracks()[0].stop() } }) .catch((error) => { console.error(error) }) } } }) } app.on('ready', createWindow) app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { if (mainWindow === null) { createWindow() } }) ipcMain.handle('synchronous-message', (event, arg) => { console.log(arg) }) ``` 在 `createWindow()` 函数中，我们创建了一个 Electron 窗口，并加载了 `index.html` 文件。我们还使用 `globalShortcut` 模块注册了一个全局快捷键（CommandOrControl+Alt+D），在按下这个快捷键时，将调用 `captureScreen()` 函数进行屏 ### 回答2： 使用Electron编写一个屏幕截图功能可以通过以下步骤实现： 1. 首先，你需要在Electron应用程序中创建一个窗口，作为截图的界面。 2. 然后，你需要使用Electron的桌面捕获API来捕获屏幕上的图像。可以使用`desktopCapturer`模块来实现。 3. 接下来，你可以将捕获到的图像显示在截图界面上。你可以使用Electron的`BrowserWindow`模块来创建一个显示图像的窗口。 4. 然后，你可以添加一些用户交互功能，例如拖动和缩放截图框来选择要截取的区域。 5. 当用户确定选择区域后，你可以使用Electron的`ipcRenderer`模块将所选区域的图像发送到主进程。 6. 在主进程中，你可以使用Electron的`nativeImage`模块将图像保存到本地文件中。 7. 最后，你可以在截图界面上显示已保存的图像，或者提供一个保存成功的提示。 总结来说，使用Electron编写一个屏幕截图功能主要涉及到创建窗口、捕获屏幕图像、显示图像、用户交互、保存图像等步骤。通过合理运用Electron的模块和API，可以很方便地实现这个功能。 ### 回答3： 要使用Electron编写一个屏幕截图功能，首先需要安装Electron开发环境并创建一个Electron项目。然后，在项目中创建一个主进程和一个渲染进程。 主进程负责创建一个窗口，并接收渲染进程的请求进行屏幕截图。在主进程中，我们可以使用Electron的屏幕模块来获取屏幕的尺寸信息。然后，可以使用Electron的桌面捕获模块来进行屏幕截图操作。 渲染进程负责创建一个界面，提供用户进行屏幕截图的操作界面。可以使用HTML、CSS和JavaScript来创建一个按钮用于触发屏幕截图功能，并通过与主进程的通信来发送截图请求。 当用户点击截图按钮时，渲染进程会向主进程发送一个截图请求。主进程接收到请求后，会调用屏幕模块获取屏幕尺寸，并通过桌面捕获模块进行屏幕截图。截图完成后，主进程将截图保存到指定的位置，并将截图的文件路径发送给渲染进程。 渲染进程接收到截图路径后，可以通过JavaScript将截图显示在界面上，或者进一步处理截图数据。 总结来说，使用Electron编写一个屏幕截图功能的过程主要包括创建主进程和渲染进程、使用屏幕模块获取屏幕尺寸信息、使用桌面捕获模块进行屏幕截图操作、与主进程进行通信发送截图请求和接收截图路径。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值