+
80
-

uniapp如何对播放的视频进行截图分享?

uniapp如何对播放的视频进行截图分享?


网友回复

+
0
-
<template>
	<view>
		<!--VIDEO标签父元素-->
		<video id="myVideo" autoplay style="height:750rpx;width:750rpx;"
			src="https://repo.bfw.wiki/bfwrepo/video/modushanghai.mp4"></video>
		<image :src="shot" style="width: 100%;height: 200px;"></image>

		<button @click="doshot">截图</button>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				shot: "",
			}
		},
		methods: {
			doshot() {


				this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
				this.videoContext.pause();
				this.$nextTick(() => {


					this.getCapture()
				})
			},
			getCapture() {


				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				let currentWebview = page.$getAppWebview()
				var bitmap = new plus.nativeObj.Bitmap('csreen');
				// 将webview内容绘制到Bitmap对象中  
				currentWebview.draw(bitmap, () => {

					console.log('截屏绘制图片成功');
					// 将原生Bitmap转换成Base64字符串  
					this.shot = bitmap.toBase64Data()
					this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
					this.videoContext.play();
				
					//这里我将文件名用四位随机数拼接了,不然会出现当前图片替换上一张图片只能保存一张图片的问题
					let rand = Math.floor(Math.random() * 10000)
					let saveUrl = '_doc/' + rand + 'a.jpg'
					bitmap.save(saveUrl, {}, function(i) {
						console.log('保存图片成功:' + JSON.stringify(i));
						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success: function() {
								 bitmap.clear(); //销毁Bitmap图片
								uni.showToast({
									title: '保存截图成功',
									duration: 1500
								});
							},
							complete() {
								uni.hideLoading();
							}
						});
					}, function(e) {
						console.log('保存图片失败:' + JSON.stringify(e));
					});


				}, (e) => {


					console.log('截屏绘制图片失败:', e);
				}, {


					check: true, // 设置为检测白屏
					clip: {

						top: uni.getSystemInfoSync().statusBarHeight + 45,
						left: '0px',
						height: '266px',
						width: '100%'
					} // 设置截屏区域
				});
			}
		}
	}
</script>

<style>

</style>

我知道答案,我要回答