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

相关推荐
Mr_Mao4 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜055 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~6 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.7 小时前
serviceWorker缓存资源
前端
RadiumAg8 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo8 小时前
ES6笔记2
开发语言·前端·javascript
yanlele8 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子9 小时前
React状态管理最佳实践
前端
米粒宝的爸爸9 小时前
uniapp在app端,在导航栏设置自定义按钮
uni-app
烛阴9 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript