From c27913c58683c1e5cbfe51b7a3f75f4d99bb0b93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E7=A3=8A?= <45566618@qq.com>
Date: Mon, 31 Mar 2025 09:20:37 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=9C=88=E5=8F=91=E5=B8=83?=
 =?UTF-8?q?=E6=97=B6=E4=B8=8D=E4=BC=A0=E5=B0=81=E9=9D=A2=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E4=B8=80=E5=BC=A0=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/video/setVideo.vue | 146 ++++++++++++++++++++++++++++-----------
 1 file changed, 106 insertions(+), 40 deletions(-)

diff --git a/pages/video/setVideo.vue b/pages/video/setVideo.vue
index 9d3062d..0952d0c 100644
--- a/pages/video/setVideo.vue
+++ b/pages/video/setVideo.vue
@@ -58,6 +58,22 @@
 			<view class="tabbar" @click="submit()">发布
 			</view>
 		</view>
+		<!-- <view>
+			<video
+			      v-if="videoSrc" 
+			      :src="videoSrc"
+			      controls 
+			      style="width: 0; height: 0"
+			      id="myVideo"
+			    ></video>
+			    <canvas 
+			      :style="{ border: '1px solid red' }"
+			      canvas-id="myCanvas"
+				  id="myCanvas"
+			      :width="canvasWidth"
+			      :height="canvasHeight"
+			    ></canvas>
+		</view> -->
 	</view>
 </template>
 
@@ -75,7 +91,10 @@
 				//头像上传
 				headImg: [],
 				videos: [],
-				videosList: ''
+				videosList: '',
+				canvasWidth: 295,
+				canvasHeight: 355,
+				videoSrc: '',
 			}
 		},
 		onLoad(e) {},
@@ -103,14 +122,15 @@
 					})
 					return
 				}
-				// if (!this.form.headImg) {
-				// 	uni.showToast({
-				// 		title: '请上视频封面',
-				// 		icon: 'none',
-				// 		duration: 1000
-				// 	})
-				// 	return;
-				// }
+				if (!this.form.headImg) {
+					// uni.showToast({
+					// 	title: '请上视频封面',
+					// 	icon: 'none',
+					// 	duration: 1000
+					// })
+					// return;
+					this.form.headImg = "https://wx.sjajk.com/file/uploadPath/logo2.png";
+				}
 				let data = {
 					createBy: uni.getStorageSync("userId"),
 					filePath: this.videosList,
@@ -136,7 +156,7 @@
 					}
 				});
 			},
-			addvideo(e) {
+			async addvideo(e) {
 				let that = this
 				uni.chooseVideo({
 					count: 1,
@@ -147,7 +167,7 @@
 							that.$queue.showLoading("上传中...");
 							uni.getFileInfo({
 								filePath: that.videos[i],
-								success: (infoRes) => {
+								success: async (infoRes) => {
 									const size = infoRes.size;
 									if (size / 1024 / 1024 > 10) {
 										// 图片大于2MB
@@ -156,9 +176,10 @@
 											title: '视频超出10MB限制,请重新选择'
 										})
 									} else {
-										//获取视频第一帧作为封面	
-										this.onLoadedMetadata(res.tempFilePath);
-
+										this.videoSrc = res.tempFilePath; //2025-03-28
+										//获取视频第一帧作为封面，ctx.drawImage时ctx.draw不回调
+										// await this.onLoadedMetadata(); //2025-03-28
+										
 										// 图片小于等于2MB
 										uni.uploadFile({ // 上传接口
 											url: websocketUtils.uploadFileUrl(), //真实的接口地址
@@ -184,35 +205,80 @@
 				})
 			},
 
-			onLoadedMetadata(tempFilePath) {
+			async onLoadedMetadata() {
 				let that = this
-				const canvas = document.createElement('canvas');
-				// 设置Canvas大小
-				canvas.width = 295;
-				canvas.height = 355;
-				console.log(canvas);
-				const context = canvas.getContext('2d');
-				const video = document.createElement('video');
-				video.src = tempFilePath;
-				// 播放视频并立即暂停以加载第一帧
-				video.play().then(() => {
+				const video = uni.createVideoContext('myVideo', that); //2025-03-28
+				video.play()
+				setTimeout(function(){
 					video.pause();
-					// 将视频的第一帧绘制到canvas上
-					context.drawImage(video, 0, 0, canvas.width, canvas.height);
-					// 将canvas转换为base64图片
-					const base64Image = canvas.toDataURL('image/png');
-					// 你可以在这里将base64Image用于显示或其他处理
-					that.checkImageSize(base64Image, (isValid) => {
-						if (isValid) {
-							// 图片校验通过后的逻辑
-							console.log('图片校验通过，可以上传');
-						} else {
-							console.log('图片超出大小限制，请重新选择');
-						}
-					});
-				}).catch(error => {
-					console.error('无法播放视频:', error);
+				}, 100)
+				const ctx = uni.createCanvasContext('myCanvas', that) //2025-03-28
+				ctx.drawImage(video, 0, 0, 295, 355);
+				ctx.draw(true, () => {
+				  console.log('✅ 标准回调执行');
+				  // 第三步：在绘制完成的回调中获取图片
+					uni.canvasToTempFilePath({
+					  canvasId: 'myCanvas',
+					  quality: 0.8,
+					  success: res => {
+						that.checkImageSize(res.tempFilePath, (isValid) => {
+							if (isValid) {
+								// 图片校验通过后的逻辑
+								console.log('图片校验通过，可以上传');
+							} else {
+								console.log('图片超出大小限制，请重新选择');
+							}
+						});
+						resolve()
+					  },
+					  fail: err => {
+						console.error('截图失败:', err)
+						reject(err)
+					  }
+					}, this)
 				});
+				
+			// 	  if (!this.checkCanvasReady()) return;
+			
+			// 	  // 绘制内容（必须包含可见元素）
+			// 	  ctx.beginPath();
+			// 	  ctx.arc(150, 150, 50, 0, Math.PI * 2);
+			// 	  ctx.fillStyle = '#00ff00';
+			// 	  ctx.fill();
+			
+			// 	  // H5 专用绘制方法
+			// 	  await this.h5Draw(ctx);
+			},
+			
+			checkCanvasReady() {
+			  // DOM 级检测
+			  const canvas = document.getElementById('myCanvas');
+			  if (!canvas) {
+				console.error('Canvas 元素未找到');
+				return false;
+			  }
+			  return true;
+			},
+			
+			async h5Draw(ctx) {
+			  return new Promise((resolve) => {
+				let callbackExecuted = false;
+				
+				// 标准回调
+				ctx.draw(true, () => {
+				  callbackExecuted = true;
+				  console.log('✅ 标准回调执行');
+				  resolve();
+				});
+		
+				// 双重保障
+				setTimeout(() => {
+				  if (!callbackExecuted) {
+					console.log('⏱️ 强制通过定时器完成');
+					resolve();
+				  }
+				}, 100);
+			  });
 			},
 
 			// 检查图片尺寸