| 
					
				 | 
			
			
				@@ -215,29 +215,98 @@ export default defineComponent({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       return new Promise((resolve, reject) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         // let dataURL = ''; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         const videoElement = document.createElement('video'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        videoElement.currentTime = 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         videoElement.setAttribute('crossOrigin', 'Anonymous'); // 处理跨域 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         videoElement.setAttribute('preload', 'auto'); // auto|metadata|none 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        videoElement.muted = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        videoElement.autoplay = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         videoElement.src = URL.createObjectURL(file); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         // Listen for 'canplay' to ensure the video is ready for frame capture 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        videoElement.addEventListener('canplay', function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          console.log('Video can play'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          const canvas: any = document.createElement('canvas'), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            width = videoElement.videoWidth, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            height = videoElement.videoHeight; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          canvas.width = width; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          canvas.height = height; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          canvas.getContext('2d').drawImage(videoElement, 0, 0, width, height); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          canvas.toBlob((blob: any) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            resolve(blob); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        videoElement.addEventListener('loadedmetadata', () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          // 这里开始播放 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          videoElement.play(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          setTimeout(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // 过500ms 暂停, 解决空白问题 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            videoElement.pause(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // 创建canvas元素 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            const canvas: any = document.createElement('canvas'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            canvas.width = videoElement.videoWidth; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            canvas.height = videoElement.videoHeight; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // 将视频帧绘制到canvas上 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // const ctx = canvas.getContext('2d'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // console.log(videoElement); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            canvas 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              .getContext('2d') 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              .drawImage(videoElement, 0, 0, canvas.width, canvas.height); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // 将canvas图像转换为base64格式的数据URI 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // const dataUrl = canvas.toDataURL('image/png'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // 返回base64格式的数据URI 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // resolve(dataUrl); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            canvas.toBlob((blob: any) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              resolve(blob); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          }, 500); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        videoElement.addEventListener('error', function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          console.error('Error loading video:', e); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // 如果视频加载出错,则返回错误信息 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        videoElement.addEventListener('error', (e: any) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				           reject(e); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // return new Promise((resolve, reject) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   videoElement.addEventListener('loadedmetadata', () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //     // 这里开始播放 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //     videoElement.play() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //     setTimeout(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       // 过500ms 暂停, 解决空白问题 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       videoElement.pause() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       // 创建canvas元素 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       const canvas = document.createElement('canvas'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       canvas.width = videoElement.videoWidth; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       canvas.height = videoElement.videoHeight; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       // 将视频帧绘制到canvas上 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       const ctx = canvas.getContext('2d'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       console.log(videoElement); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       // 将canvas图像转换为base64格式的数据URI 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       const dataUrl = canvas.toDataURL('image/png'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       console.log(dataUrl); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       thumbnail.src = dataUrl; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       thumbnail.style.display = 'inline'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       // 返回base64格式的数据URI 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //       resolve(dataUrl); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //     }, 500); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   // 如果视频加载出错,则返回错误信息 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   videoElement.addEventListener('error', () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //     reject(`Failed to load video: ${videoUrl}`); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // videoElement.addEventListener('canplay', function () { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   console.log('Video can play'); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   const canvas: any = document.createElement('canvas'), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //     width = videoElement.videoWidth, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //     height = videoElement.videoHeight; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   canvas.width = width; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   canvas.height = height; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   canvas.getContext('2d').drawImage(videoElement, 0, 0, width, height); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   canvas.toBlob((blob: any) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //     resolve(blob); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // videoElement.addEventListener('error', function (e) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   console.error('Error loading video:', e); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        //   reject(e); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 |