视频圈发布时不传封面默认一张图片

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) {
+				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,8 +176,9 @@
 											title: '视频超出10MB限制,请重新选择'
 										})
 									} else {
-										//获取视频第一帧作为封面	
+										this.videoSrc = res.tempFilePath; //2025-03-28
-										this.onLoadedMetadata(res.tempFilePath);
+										//获取视频第一帧作为封面，ctx.drawImage时ctx.draw不回调
+										// await this.onLoadedMetadata(); //2025-03-28
 										
 										// 图片小于等于2MB
 										uni.uploadFile({ // 上传接口
@@ -184,25 +205,23 @@
 				})
 			},
 
-			onLoadedMetadata(tempFilePath) {
+			async onLoadedMetadata() {
 				let that = this
-				const canvas = document.createElement('canvas');
+				const video = uni.createVideoContext('myVideo', that); //2025-03-28
-				// 设置Canvas大小
+				video.play()
-				canvas.width = 295;
+				setTimeout(function(){
-				canvas.height = 355;
-				console.log(canvas);
-				const context = canvas.getContext('2d');
-				const video = document.createElement('video');
-				video.src = tempFilePath;
-				// 播放视频并立即暂停以加载第一帧
-				video.play().then(() => {
 					video.pause();
-					// 将视频的第一帧绘制到canvas上
+				}, 100)
-					context.drawImage(video, 0, 0, canvas.width, canvas.height);
+				const ctx = uni.createCanvasContext('myCanvas', that) //2025-03-28
-					// 将canvas转换为base64图片
+				ctx.drawImage(video, 0, 0, 295, 355);
-					const base64Image = canvas.toDataURL('image/png');
+				ctx.draw(true, () => {
-					// 你可以在这里将base64Image用于显示或其他处理
+				  console.log('✅ 标准回调执行');
-					that.checkImageSize(base64Image, (isValid) => {
+				  // 第三步：在绘制完成的回调中获取图片
+					uni.canvasToTempFilePath({
+					  canvasId: 'myCanvas',
+					  quality: 0.8,
+					  success: res => {
+						that.checkImageSize(res.tempFilePath, (isValid) => {
 							if (isValid) {
 								// 图片校验通过后的逻辑
 								console.log('图片校验通过，可以上传');
@@ -210,8 +229,55 @@
 								console.log('图片超出大小限制，请重新选择');
 							}
 						});
-				}).catch(error => {
+						resolve()
-					console.error('无法播放视频:', error);
+					  },
+					  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);
 			  });
 			},