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

ops/2024/11/30 10:32:09/

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

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

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


http://www.ppmy.cn/ops/137901.html

相关文章

[HNCTF 2022 WEEK2]TTTTTTTTTea

下载附件,用ida打开。 反编译,查看源码。 v4感觉就是密文,进入tea_encrypt中查看加密方式: 就是一个数据转换。 在查看key,找到密钥。 这里是需要转换为四个八位的数,因为一个int是四个字节,一…

开发中使用UML的流程_04 CIM-3:定义系统范围

CIM-1和CIM-2的生成文件,跟CIM-3的生成文件之间,有如下的关联性:。CIM-2活动图中的每一个动作,都可能成为CIM-3的系统用例。 。CIM-1中的业务执行者,以及CIM-2中的动作负责人,都可能成为CIM-3的系统执行者(…

【eNSP】ISIS动态路由协议实验

和OSPF一样,IS-IS也是一种基于链路状态并使用最短路径优先算法进行路由计算的一种IGP协议。IS-IS最初是国际化标准组织ISO为它的无连接网络协议CLNP设计的一种动态路由协议。 为了提供对IP的路由支持,IETF在RFC1195中对IS-IS进行了扩充和修改&#xff0c…

三菱A800变频器关于操作面板(FR-DU08)

操作面板的各部分名称(FR-DU08) 关于参数设定模式 在参数设定模式中可对变频器各种功能(参数)进行设定。 说明关于参数设定模式的显示画面。 变更参数设定值 变更示例 变更 Pr.1上限频率。

Qt中模拟鼠标消息并与系统鼠标消息进行区分

功能使用场景: 开发一个教学系统,包含了教师端、学生端,并且教师端支持示教功能。此时,学生端的鼠标、键盘不响应系统事件,但需要响应教师端发过来的鼠标移动、按下消息。 因为共享页面相同,为了提高局域…

论文笔记(五十八)Trends and challenges in robot manipulation

Trends and challenges in robot manipulation 文章概括背景进展展望摘要机器人今天能做什么?机器人今天不能做什么?为什么设计机器人手很困难?超越拟人化设计下一代机器人手的期望目标操控中的感知抓取:迈向操控的垫脚石从抓取到…

原生微信小程序画表格

wxml部分&#xff1a; <view class"table__scroll__view"><view class"table__header"><view class"table__header__item" wx:for"{{TableHeadtitle}}" wx:key"index">{{item.title}}</view></…

项目介绍和游戏搭建(拼图小游戏)

1. &#xff08;1&#xff09; import javax.swing.*;public class GameJFrame extends JFrame {//游戏主界面&#xff0c;游戏的所有逻辑public GameJFrame(){this.setSize(603,680);this.setVisible(true);//true是展示&#xff0c;flase是隐藏} } &#xff08;2&#xff…