修改图片显示

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.cu1t6bfj3j8"
+    "revision": "0.03e7uq64dqg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

public/version.json

@@ -1 +1 @@
-{"version":1709302861444}
+{ "version": 1709302861444 }

src/views/natural-resources/components/my-resources/save-modal/index.tsx

@@ -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);
+        // });
       });
     };
 

vite.config.ts

@@ -24,7 +24,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://dev.kt.colexiu.com/';
-const proxyUrl = 'https://test.lexiaoya.cn';
+const proxyUrl = 'https://test.kt.colexiu.com';
 // const proxyUrl = 'http://192.168.3.14:7989';
 const now = new Date().getTime();
 export default defineConfig(() => {