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

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

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

javascript 复制代码
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

javascript 复制代码
this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
			  this.videoContext.pause();

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

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

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

相关推荐
Wiktok4 小时前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
冲!!4 小时前
SCSS 中的Mixins 和 Includes,%是什么意思
前端·css·scss
星语卿5 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11255 小时前
界面规范11-对话框
javascript·vue.js·elementui
roman_日积跬步-终至千里5 小时前
【系统架构设计(25)】Web应用服务器与现代架构
前端·架构·系统架构
yshhuang5 小时前
在Windows上搭建开发环境
前端·后端
littleplayer5 小时前
Redux在iOS中的使用
前端
跟橙姐学代码6 小时前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython