当前位置: 首页 > article >正文

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

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

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

getCapture() {
				let _this = this
				let 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'); //创建视频实例指向video
							this.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'); //创建视频实例指向video
			  this.videoContext.pause();

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

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

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


http://www.kler.cn/a/417540.html

相关文章:

  • 接口对象封装思想及实现-笔记
  • 概念RAG
  • 动静态库的学习
  • 如何安装PHP依赖库 更新2025.2.3
  • SpringBoot+SpringDataJPA项目中使用EntityManager执行复杂SQL
  • 说一下JVM管理的常见参数
  • MySQL中的锁与MVCC
  • 【Ansible】自动化运维工具
  • Kafka知识体系
  • Python面向对象编程与模块化设计练习
  • 【Linux】管道
  • RAT:融合RAG和CoT的高效多步推理任务策略
  • 【ROS2】ROS2 Hello World (C++实现)
  • Keras构建卷积神经网络
  • 48-基于单片机的LCD12864时间调控和串口抱站
  • Oracle对比表与表之间的结构
  • 【Lucene】单个cpu 每秒能支持多少个bm25公式的计算
  • Apache Flink从Kafka中消费商品数据,并进行商品分类的数量统计题
  • 【测试工具JMeter篇】JMeter性能测试入门级教程(四):JMeter中BeanShell内置方法使用
  • 拓扑排序(C++实现)
  • ffmpeg安装(windows)
  • updatexml报错注入原理分析
  • kylinos-server源码安装xrdp
  • 丹摩征文活动 | SD3+ComfyUI的图像部署实践 AIGC图像
  • 基于Java Springboot蛋糕订购小程序
  • 【大模型实战篇】基于大模型GLM的检索增强实践