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

相关推荐
然我1 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林1 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
brzhang8 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止8 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms8 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登8 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in9 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern41610 小时前
HTML面试题
前端·html
张可10 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课11 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架