修改图片预览默认宽高自适应和视频预览报错后，再次就无法预览问题

src/components/common/video_player.vue

@@ -26,42 +26,45 @@ export default {
         if (this.src.endsWith("flv")) {
             if (flvjs.isSupported()) {
                 var videoElement = document.getElementById('my-player');
-                this.flvPlayer = flvjs.createPlayer({
-                    type: 'flv',
-                    isLive: true,
-                    url: this.src,//flv格式流地址
-                }, {
-                    enableWorker: false, //不启用分离线程
-                    enableStashBuffer: false, //关闭IO隐藏缓冲区
-                    reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
-                    autoCleanupSourceBuffer: true //自动清除缓存
-                });
-                this.flvPlayer.attachMediaElement(videoElement);
-                this.flvPlayer.load(); //加载
-                this.flvPlayer.play();//播放
+                this.$nextTick(() => {
+                    this.flvPlayer = flvjs.createPlayer({
+                        type: 'flv',
+                        isLive: true,
+                        url: this.src,//flv格式流地址
+                    }, {
+                        enableWorker: false, //不启用分离线程
+                        enableStashBuffer: false, //关闭IO隐藏缓冲区
+                        reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
+                        autoCleanupSourceBuffer: true //自动清除缓存
+                    });
+                    this.flvPlayer.attachMediaElement(videoElement);
+                    this.flvPlayer.load(); //加载
+                    this.flvPlayer.play();//播放
+                })
             }
         } else {
             videojs.addLanguage("zh-CN", videozhCN);
-            this.mp4Player = videojs('my-player', {
-                sources: [{
-                    language: "zh-CN",
-                    src: this.src,
-                    autoplay: true,
-                    playbackRates: [0.5, 1, 1.5, 2] //倍速播放
-                }]
-            }, function () {
-
-            });
-            this.mp4Player.play();
+            this.$nextTick(() => {
+                this.mp4Player = videojs('my-player', {
+                    sources: [{
+                        language: "zh-CN",
+                        src: this.src,
+                        autoplay: true,
+                        playbackRates: [0.5, 1, 1.5, 2] //倍速播放
+                    }]
+                });
+                this.mp4Player.play();
+            })
         }
     },
     destroyed() {
-        this.flvPlayer && this.flvPlayer.unload();
-        this.flvPlayer && this.flvPlayer.detachMediaElement()
+        // this.flvPlayer && this.flvPlayer.unload();
+        // this.flvPlayer && this.flvPlayer.detachMediaElement()
         this.flvPlayer && this.flvPlayer.destroy();
-
-        this.mp4Player && this.mp4Player.pause()
         this.mp4Player && this.mp4Player.dispose();
+        this.mp4Player = null;
+        this.flvPlayer = null;
+        // this.mp4Player && this.mp4Player.pause()
     }
 }
 </script>
\ No newline at end of file

src/view/flfg/znfx.vue

@@ -364,7 +364,7 @@
     <el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px"
         :destroyOnClose="true">
         <div style="text-align: center;" v-loading="loadings">
-            <el-image style="width: 750px; height: 500px" :src="img_src" :preview-src-list="[img_src]">
+            <el-image style="width: 750px; height: 500px" :src="img_src" :preview-src-list="[img_src]" class="imgs">
             </el-image>
         </div>
     </el-dialog>
@@ -970,6 +970,7 @@ export default {
     convertBMPtoPNG(bmpImage, callback) {
         // 创建一个新的 Image 对象
         const img = new Image();
+        img.setAttribute("crossOrigin",'Anonymous')
         img.onload = function () {
             // 创建一个 Canvas 元素
             const canvas = document.createElement('canvas');
@@ -1569,5 +1570,10 @@ export default {
       }
     }
   }
+  .imgs{
+      .el-image__preview{
+        object-fit: contain;
+      }
+  }
 }
 </style>

src/view/flfg/znfxZfcl.vue

@@ -364,7 +364,7 @@
     <el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px"
         :destroyOnClose="true">
         <div style="text-align: center;" v-loading="loadings">
-            <el-image style="width: 750px; height: 500px" :src="img_src" :preview-src-list="[img_src]">
+            <el-image style="width: 750px; height: 500px" :src="img_src" :preview-src-list="[img_src]" class="imgs">
             </el-image>
         </div>
     </el-dialog>
@@ -967,6 +967,32 @@ export default {
       this.searchs(1);
       this.wjfx_qh = true;
     },
+    convertBMPtoPNG(bmpImage, callback) {
+        // 创建一个新的 Image 对象
+        const img = new Image();
+        img.setAttribute("crossOrigin",'Anonymous')
+        img.onload = function () {
+            // 创建一个 Canvas 元素
+            const canvas = document.createElement('canvas');
+            canvas.width = img.width;
+            canvas.height = img.height;
+
+            // 获取 CanvasRenderingContext2D 对象
+            const ctx = canvas.getContext('2d');
+
+            // 将 BMP 图片绘制到 Canvas 上
+            ctx.drawImage(img, 0, 0);
+
+            // 将 Canvas 的内容转换为 PNG 格式的 DataURL
+            const pngImage = canvas.toDataURL('image/png');
+
+            // 调用回调函数并传递转换后的 PNG 图片
+            callback(pngImage);
+        };
+
+        // 设置 BMP 图片源
+        img.src = bmpImage;
+    }
   },
   mounted() {
     let _this = this;
@@ -1544,5 +1570,10 @@ export default {
       }
     }
   }
+  .imgs{
+      .el-image__preview{
+        object-fit: contain;
+      }
+  }
 }
 </style>

src/view/fzjc/znfx.vue

@@ -365,7 +365,7 @@
     <el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px"
         :destroyOnClose="true">
         <div style="text-align: center;" v-loading="loadings">
-            <el-image style="width: 750px; height: 500px" :src="img_src" :preview-src-list="[img_src]">
+            <el-image style="width: 750px; height: 500px" :src="img_src" :preview-src-list="[img_src]" class="imgs">
             </el-image>
         </div>
     </el-dialog>
@@ -1023,6 +1023,7 @@ export default {
     convertBMPtoPNG(bmpImage, callback) {
         // 创建一个新的 Image 对象
         const img = new Image();
+        img.setAttribute("crossOrigin",'Anonymous')
         img.onload = function () {
             // 创建一个 Canvas 元素
             const canvas = document.createElement('canvas');
@@ -1639,5 +1640,10 @@ export default {
       }
     }
   }
+  .imgs{
+      .el-image__preview{
+        object-fit: contain;
+      }
+  }
 }
 </style>

src/view/sjgl/wxk_public.vue

@@ -387,7 +387,7 @@
         <el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px"
             :destroyOnClose="true">
             <div style="text-align: center;" v-loading="loadings">
-                <el-image style="width: 750px; height: 500px" :src="img_src" :preview-src-list="[img_src]">
+                <el-image style="width: 750px; height: 500px" :src="img_src" :preview-src-list="[img_src]" class="imgs">
                 </el-image>
             </div>
         </el-dialog>
@@ -1593,6 +1593,7 @@ export default {
         convertBMPtoPNG(bmpImage, callback) {
             // 创建一个新的 Image 对象
             const img = new Image();
+            img.setAttribute("crossOrigin",'Anonymous')
             img.onload = function () {
                 // 创建一个 Canvas 元素
                 const canvas = document.createElement('canvas');
@@ -2354,6 +2355,11 @@ export default {
         background-color: #00648a96 !important;
         // border-radius: 5px;
     }
+    .imgs{
+        .el-image__preview{
+            object-fit: contain;
+        }
+    }
 
 }
 </style>