uniapp的video组件截图(抓拍)功能,解决截后为黑图bug

news/2024/12/12 20:36:35

废话不多说先上代码!!!!

点击截图按钮触发以下方法

getCapture() {let _this = thislet pages = getCurrentPages();let page = pages[pages.length - 1];let ws = page.$getAppWebview();let bitmap = new plus.nativeObj.Bitmap('test');// 将webview内容绘制到Bitmap对象中ws.draw(bitmap,function(){setTimeout(function() {this.base64img = ''console.log('截屏绘制图片成功');// 将原生Bitmap转换成Base64字符串_this.base64img = bitmap.toBase64Data();this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向videothis.videoContext.play();//console.log('截屏图片===='+_this.base64img);bitmap.clear(); // 清除Bitmap对象 }, 100);},(e) => {console.log('截屏绘制图片失败:', e);bitmap.clear(); // 清除Bitmap对象 },{check: true, // 设置为检测白屏clip: { top: uni.getSystemInfoSync().statusBarHeight + 75, left: '0px', height: '300px', width: '100%' } // 设置截屏区域});},

但是,这个方法不全面,在此之前需要暂停视频播放来实现截图,否则可能会出现截图为黑图的bug

this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向videothis.videoContext.pause();

这句话你可以放在截图按钮触发的方法中,这两句话的作用就是指向你的video组件并且暂停播放,然后使用延时函数把上面方法放到该延时函数中调用,方法如下

takeScreenshot() {this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向videothis.videoContext.pause();let _this = thissetTimeout(function(){_this.$nextTick(() => {_this.getCapture();});},500)},

如果对官网文档感兴趣,自行点击查看:HTML5+ API Reference


https://dhexx.cn/news/show-5466009.html

相关文章

初窥 HTTP 缓存

引言 对于前端来说, 你肯定听说过 HTTP 缓存。 当然不管你知不知道它, 对于提高网站性能和用户体验, 它都扮演着重要的角色! 它通过在客户端和服务器之间存储和重用先前获取的资源副本, 来减少网络流量和降低资源加载时间, 从而提升用户体验! 以下是 HTTP 缓存的重要性: 减少…

C++实现网格交易的例子

网格交易是一种投资策略,它通过在预设的价格区间内自动进行买入和卖出操作来捕捉市场的波动收益。以下是网格交易的一些详细介绍: 定义: 网格交易策略是一种围绕基准价进行的交易方法,每当价格下跌时,在触发点位执行买…

【docker】docker的起源与容器的由来、docker容器的隔离机制

Docker 的起源与容器的由来 1. 虚拟机的局限:容器的需求萌芽 在 Docker 出现之前,开发和部署软件主要依赖虚拟机(VMs): 虚拟机通过模拟硬件运行操作系统,每个应用程序可以运行在自己的独立环境中。虽然虚…

云技术基础(泷羽sec)

声明 学习视频来自B站UP主 泷羽sec,如涉及侵泷羽sec权马上删除文章。 笔记只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 这节课旨在扩大自己在网络安全方面的知识面,了解网络安全领域的见闻,了…

Sofia-SIP 使用教程

Sofia-SIP 是一个开源的 SIP 协议栈,广泛用于 VoIP 和即时通讯应用。以下是一些基本的使用教程,帮助你快速上手 Sofia-SIP。 1. 安装 Sofia-SIP 首先,你需要安装 Sofia-SIP 库。你可以从其官方 GitHub 仓库克隆源代码并编译安装&#xff1a…

C++优选算法十六 BFS解决最短路问题

1.BFS解决最短路问题的优势与局限 BFS是一种有效的解决最短路问题的算法,特别适用于无权图或边权相等的图。 优势: BFS能够逐层遍历图中的所有节点,直到找到目标节点或遍历完所有可达节点。对于无权图(即边权为1的图&#xff0…

在内网工作时,如何使用 vscode remote ssh 去连接内网服务器?

来源:https://stackoverflow.com/questions/56671520/how-can-i-install-vscode-server-in-linux-offline 看这个回答: 一般来说,内网会提供 vscode 安装包,remote-ssh 的 vsix,先安装好。 随后,保证自己…

C++设计模式:桥接模式(Bridge)

什么是桥接模式? 桥接模式(Bridge Pattern)是一个用来解耦的设计模式,它将抽象层和实现层分离开,让它们可以独立变化。用最简单的话来说,就是让你能够改变抽象的功能和具体的实现,而不需要修改…

Zariski交换代数经典教材Commutative Algebra系列(pdf可复制版)

Zariski的名字估计学代数几何的人都耳熟能详,先是入门时期的交换代数教材,然后就是深入研究时期随处可见的Zariski拓扑。本帖我们分享的便是著名的Zariski交换代数教材。 Oscar Zariski & Pierre Samuel写的交换代数经典教材Commutative Algebra&am…

AppFlow:支持飞书机器人调用百炼应用

AppFlow:支持飞书机器人调用百炼应用 简介: 本文介绍了如何创建并配置飞书应用及机器人,包括登录飞书开发者后台创建应用、添加应用能力和API权限,以及通过AppFlow连接流集成阿里云百炼服务,最后详细说明了如何将机器…