electron 内部api capturePage实现webview截图

九段刀客

已于 2023-12-18 02:23:48 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： electron javascript 前端

于 2023-11-11 14:10:06 首次发布

本文链接：https://blog.csdn.net/weixin_35958891/article/details/134347693

本文介绍了如何在Node.js环境中，利用aweb123.com的WebviewAPI实现捕获指定矩形区域或全页面的快照，通过Promise和async/await处理返回的NativeImage对象并转换为DataURL。

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

博主开发了一个浏览器aweb123.com
在这里插入图片描述

官方文档

.capturePage([rect])
rect Rectangle (可选) - 要捕获的页面区域。
返回 Promise - 完成后返回一个NativeImage

在 rect内捕获页面的快照。省略 rect 将捕获整个可见页面。

async function cap(){
let image = await webviewRef.value.capturePage()
console.log(image)
const appIcon = image.toDataURL()
console.log(appIcon)
}

在这里插入图片描述

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

九段刀客

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

electron-vue的webview详解及案例代码

日常笔记/总结/系列知识梳理

12-22

1482

使用WebView组件，您可以将网页内容嵌入到Electron应用程序中，并使用Vue组件来控制和管理WebView的内容。Electron-Vue中的WebView组件是一种用于在Electron应用程序中嵌入网页的组件。WebView组件允许您在Electron应用程序中呈现网页内容，并且可以与Vue组件进行交互。安装WebView组件：首先，您需要在项目中安装WebView组件。您可以使用npm或yarn来安装它。导入WebView组件：在您的Vue组件中，您需要导入WebView组件。

Electron中Webview与渲染进程和主进程通讯方式揭秘

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

02-19

123

在Electron开发中，webview的使用是很常见的但很多人对于webview与渲染进程、主进程的通讯方式不太清楚网上的相关文章很多都不详细，Electron官网的介绍也不够深入本文将详细介绍Electron中webview与渲染进程、主进程的通讯方式，希望对大家有所帮助webview的API中，与通讯相关的主要有两个事件：did-attach和ipc-message did-attach事件在webview被附加到页面时触发，ipc-message事件在webview接收到IPC消息时触发详细

参与评论您还未登录，请先登录后发表或查看评论

captureelectron使用Electron捕获截图

08-12

capture-electron 使用Electron捕获截图

electron实现截图（一）

wwtx2048的博客

02-27

4683

electron截图实现，代码简单好入手。

electron截屏功能（navaigator.mediaDevices、screen.getAllDisplays、desktopCapturer.getSources、js-web-screen）

最新发布

weixin_41420790的博客

06-11

460

主要用到的win.show()、win.hide()、聚焦focus()、blur()等常用方法；具体代码：其中 dispaly为显示器对象。二、窗口事件，显示器监听。

electron实现屏幕截图

陌子曦的专栏

08-23

2626

electron实现屏幕截图功能

【亲测免费】探索 Electron-Screenshot-Service：高效截图利器

gitblog_00043的博客

06-15

1504

???? 探索 Electron-Screenshot-Service：高效截图利器在日常的开发工作中，我们时常需要对网页进行自动化截图处理，无论是为了测试、监控还是数据收集，一个稳定且功能强大的截图工具总是不可或缺。今天，我要向大家推荐的是 Electron-Screenshot-Service，它是一个基于 Electron 的跨平台截图服务，能够帮助您轻松地捕获任何网页的快照。 ???? 项目介绍什...

electron 的一个截图插件工具

08-14

electron 的一个截图插件工具，类似QQ截图.............................

electron+VUE Browserwindow与webview通信

immotal_xiaoqiang的博客

03-29

1821

如果能看到webview控制台里面的命令：window.electronAPI 说明已经通信成功了，后面就可以自己实现自己的逻辑了。1，porelaod注入的路径需要以file:///开头的绝对路径，如果不能保证可以直接在vue中如下写法来进行测试。例如：file:///C:/porelaod/webPreload.js。webview.openDevTools()打开webview的控制台。其中preloadPath需要以file:///开头的绝对路径。// 在webview中注入脚本。

electron中使用webview

qq_43447509的博客

02-15

3758

使用webview标签 <webview src="https://www.baidu.com" preload="./preload.js"></webview> 向webview注入JS // preload.js const { contextBridge } = require('electron') contextBridge.exposeInMainWorld('apiKey', { fn: () => {} }) // 在webview页面使用 wind

electron + vue项目实现打印小票功能及实现代码

12-12

公司项目需要通过electron调用系统打印机，实现打印小票的功能。二、分析： electron打印大概有两种：第一种：通过window的webcontent对象，使用此种方式需要单独开出一个打印的窗口，可以将该窗口隐藏，但是通信...

electron-screenshot-app:截屏

05-25

电子截屏应用制作屏幕截图安装 $ npm install electron-screenshot-app --save 用法 var app = require ( 'electron' ) . app ; var screenshot = require ( 'electron-screenshot-app' ) ; app . on ( 'ready' , function ( ) { screenshot ( { url : 'http://sassdoc.com' , width : 1920 , height : 1080 } , function ( err , image ) { // image.data is a Node Buffer // image.size contai

electroncapture:在无框电子应用程序中播放视频以进行屏幕共享和窗口捕获

07-24

这是电子捕获应用程序，为用户创建，它可以为用户提供一种干净的窗口捕获网站的方式。就 VDO.Ninja 而言，它可能提供比 OBS 内置的浏览器源插件更灵活、更可靠的捕获实时视频的方法。为什么？在某些系统上，OBS 浏览器源插件不可用或不能很好地工作，因此该工具是一个可行的替代方案。它让您无需浏览器源插件即可干净地截取视频流。它还可以轻松选择输出音频播放设备，例如虚拟音频设备：即）（Windows 和 macOS；捐赠软件）该应用程序还可以设置为保留在其他窗口的顶部，在可能的情况下尝试隐藏鼠标光标，为 1:1 像素映射提供准确的窗口大小，并支持全局系统热键（例如 Windows 上的 CTRL+M）。 Windows 用户可能会发现它也很有用，因为它支持 VDO.Ninja 的音频同步命令，并且它对视频数据包丢失有强大的支持。换句话说，它可以比 OBS 更好地

capturepage:假车间的捕获页面

03-20

:laptop:捕获页作为技术HTML和CSS的实用对象，在线上的投射项目，最终的培训班，简化的对象，bonito e funcional等，都由fazer umapáginade captura para组成。 :rocket:技术 :check_mark:HTML :check_mark:CSS

chrome全屏截屏插件-Full Page Screen Capture

01-13

A simple Google Chrome extension that takes a screen capture of a full web page. Every extension I tried couldn’t do this on Chrome 22 on Mac OSX Lion. So, I built this one to reliably do it. (Not tested, yet, on any other configurations.)

electron实现截图的功能

weixin_38441229的博客

11-23

4064

electron实现截图的功能

electron 截取图片

qq_37905131的博客

06-27

1087

electron 截取桌面图片

Electron 应用实现截图并编辑功能

Talk is cheap, show the code. zhangsihui.pythonanywhere.com

08-12

3497

Electron 应用如何实现截屏功能，有两种思路，作为一个框架是否可以通过框架实现截屏，另一种就是 javaScript 结合 html 中画布功能实现截屏。在初步思考之后，本文优先探索使用 Electron 实现截屏功能。作为一个成熟的框架，如果能够完成截屏，那自然是已经考虑了各种会出现的问题。 Electron 想要截屏还是要用到 desktopCapturer API。这个 API 也是用来实现录屏。

Electron 项目实战 03: 实现一个截图功能

Potter：I am not for learning and learning, but for study and work

08-29

2864

虽然实现了核心功能，但是仅支持主屏幕截图，不支持多屏幕截图，同时还遗留诸多问题，后面单独一篇更新解决传送门。