<div v-click-outside="hide">
  <button @click="open">打开弹窗</button>
  <div v-if="show">我是弹窗</div>
</div>

<script>
  function open() {
    this.show = true
  }
  function hide() {
    this.show = false
  }
</script>

<div class="screen-wrapper">
  <div class="screen" id="screen"></div>
</div>

<style>
  .screen-root {
    height: 100%;
    width: 100%;
  }
  .screen {
    display: inline-block;
    width: 1920px; /*设计稿的宽度*/
    height: 960px; /*设计稿的高度*/
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
  }
</style>

<!-- video-to-img 组件 -->
<template>
  <div class="video-to-img">
    <img class="img" v-if="coverUrl" :src="coverUrl" alt="视频封面">
    <video
      ref="videoRef"
      class="video"
      controls
      crossOrigin="anonymous"
      @loadedmetadata="onVideoLoaded"
    ></video>
    <canvas class="canvas" ref="canvasRef"></canvas>
  </div>
</template>

<script >
export default {
  props: {
    currentTime: {  // 截取视频时间点，单位秒
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      coverUrl: '',
    }
  },
  methods: {
    onVideoChange(file) {
      const url = URL.createObjectURL(file);
      this.$refs.videoRef.src = url;
    },
    onVideoLoaded() {
      const video = this.$refs.videoRef;
      video.currentTime = this.currentTime;
      video.addEventListener('seeked', this.drawFrameToCanvas, { once: true });
    },
    drawFrameToCanvas() {
      const video = this.$refs.videoRef;
      const canvas = this.$refs.canvasRef;

      canvas.width = video.videoWidth || 700;
      canvas.height = video.videoHeight || 300;

      const ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      canvas.toBlob((blob) => {
        const coverFile = new File([blob], 'cover.png', { type: 'image/png' });
        this.coverUrl = URL.createObjectURL(coverFile);
        this.$emit('success', coverFile);
      }, 'image/png', 0.92);
    },
  }
}
</script>

<style lang="scss" scoped>
.video-to-img {
  .img {
    width: 300px;
    height: 150px;
    object-fit: cover;
  }
  .video {
    display: none;
  }
  .canvas {
    display: none;
  }
}
</style>

<template>
  <div id="app">
    <input type="file" accept="video/*" @change="onVideoChange" />
    <video-to-img ref="toImgRef" @success="handleSuccess"></video-to-img>
  </div>
</template>

<script>
import VideoToImg from './video-to-img.vue';
export default {
  components: {
    VideoToImg,
  },
  data() {
    return {
      
    }
  },
  methods: {
    onVideoChange(e) {
      const file = e.target.files[0];
      if (!file) return;
      this.$refs.toImgRef.onVideoChange(file);
    },
    handleSuccess(file) {
      console.log('封面图文件:', file);
    },
  }
}
</script>

<!-- video-to-img 组件 -->
 <template>
	<view class="video-to-image">
		<view class="img-box" :config="config" :change:config="canvas.changeConfig" :prop="videoSrc" :change:prop="canvas.changeVideo"></view>
		<canvas class="canvas" canvas-id="firstCanvas" id="firstCanvas"></canvas>
	</view>
</template>

<script>
export default {
	props: {
		path: {
			type: String,
			default: '',
		},
		config: {
			type: Object,
			default: () => {
				return {};
			}
		},
		returnType: {
			type: String,
			default: 'base64',
			validator(val) {
				return ['base64', 'tempFilePath'].includes(val);
			}
		}
	},
	data() {
		return {
			videoSrc: '',
			offscreenCanvas: null,
			system: null,
		};
	},
	watch: {
		path: {
			handler(val) {
				if(val) {
					this.onVideoChange(val);
				}
			},
			immediate: true
		}
	},
	mounted() {
		this.system = uni.getSystemInfoSync();
		setTimeout(() => {
			this.offscreenCanvas = uni.createCanvasContext('firstCanvas', this);
		}, 500);
	},
	methods: {
		onVideoChange(videoPath) {
			let url = '';
			if(videoPath.startsWith('file:/')) {
				url = videoPath;
			} else {
				url = 'file://' + plus.io.convertLocalFileSystemURL(videoPath);
			}
			
			this.videoSrc = url;
		},
		getBase64(obj) {
			const defaults = {
				currentTime: 2, 
				width: 350,
				height: 150,
			};
			const _config = {
				...defaults,
				...this.config,
			}
			if(this.returnType === 'base64') {
				this.$emit('success', obj.src);
			} else {
				this.offscreenCanvas.drawImage(obj.src, 0, 0, _config.width, _config.height);
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					canvas: this.offscreenCanvas,
					success: (result) => {
						this.$emit('success', result.tempFilePath);
					}
				});
			}
		}
	}
};
</script>

<script module="canvas" lang="renderjs">
export default {
	data() {
		return {
			ownerInstance: null,
			videos: null,
			_config: {
				currentTime: 2, 
				width: 350,
				height: 150,
			}
		}
	},
	methods: {
		changeConfig(newValue) {
			const defaults = {
				currentTime: 2, 
				width: 350,
				height: 150,
			};
			this._config = {
				...defaults,
				...newValue
			};
		},
		changeVideo(newValue, oldValue, instance) {
			if(!newValue) return;
			this.ownerInstance = instance;
			this.videos = document.createElement("video");
			this.videos.src = newValue;
			this.videos.crossOrigin = 'anonymous';
			this.videos.muted = true;
			this.videos.autoplay = true;
			this.videos.style.width = this._config.width + 'px';
			this.videos.style.height = this._config.height + 'px';
			this.videos.currentTime = this._config.currentTime;
			this.videos.addEventListener('seeked', this.drawFrameToCanvas, {once: true});
		},
		drawFrameToCanvas() {
			let canvas = document.createElement('canvas');
			canvas.width = this._config.width;
			canvas.height = this._config.height;
			const ctx = canvas.getContext('2d');
			ctx.drawImage(this.videos, 0, 0, canvas.width, canvas.height);
			const imgSrc = canvas.toDataURL("image/png");
			this.ownerInstance.callMethod('getBase64', {
					src: imgSrc
			});
			this.videos.removeEventListener('seeked', this.drawFrameToCanvas);
			this.videos = null;
			canvas = null;
		}
	}
}
</script>

<style lang="scss" scoped>
.video-to-image {
	.img-box {
		width: 700rpx;
		height: 350rpx;
		.img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.canvas {
		position: fixed;
		left: -9999px;
		top: -9999px;
		width: 1170px;
		height: 2532px;
	}
}
</style>

<template>
	<view class="pages">
		<button @click="handleClick">选择视频</button>
		<image class="img" :src="coverUrl" mode="aspectFill"></image>
		<video-to-image :path="videoPath" @success="handleSuccess"></video-to-image>
		<!--  returnType="tempFilePath" -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			coverUrl: '',
			videoPath: ''
		}
	},
	methods: {
		handleClick() {
			uni.chooseVideo({
				maxDuration: 60,
				success: (res) => {
					console.log('选择的文件', res.tempFilePath)
					this.videoPath = res.tempFilePath;
				},
			})
		},
		handleSuccess(val) {
			this.coverUrl = val;
			console.log('返回的数据', val)
		},
	}
}
</script>