Commit 99aa173f authored by 高飞's avatar 高飞

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

parent 07f0cf39
...@@ -26,6 +26,7 @@ export default { ...@@ -26,6 +26,7 @@ export default {
if (this.src.endsWith("flv")) { if (this.src.endsWith("flv")) {
if (flvjs.isSupported()) { if (flvjs.isSupported()) {
var videoElement = document.getElementById('my-player'); var videoElement = document.getElementById('my-player');
this.$nextTick(() => {
this.flvPlayer = flvjs.createPlayer({ this.flvPlayer = flvjs.createPlayer({
type: 'flv', type: 'flv',
isLive: true, isLive: true,
...@@ -39,9 +40,11 @@ export default { ...@@ -39,9 +40,11 @@ export default {
this.flvPlayer.attachMediaElement(videoElement); this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load(); //加载 this.flvPlayer.load(); //加载
this.flvPlayer.play();//播放 this.flvPlayer.play();//播放
})
} }
} else { } else {
videojs.addLanguage("zh-CN", videozhCN); videojs.addLanguage("zh-CN", videozhCN);
this.$nextTick(() => {
this.mp4Player = videojs('my-player', { this.mp4Player = videojs('my-player', {
sources: [{ sources: [{
language: "zh-CN", language: "zh-CN",
...@@ -49,19 +52,19 @@ export default { ...@@ -49,19 +52,19 @@ export default {
autoplay: true, autoplay: true,
playbackRates: [0.5, 1, 1.5, 2] //倍速播放 playbackRates: [0.5, 1, 1.5, 2] //倍速播放
}] }]
}, function () {
}); });
this.mp4Player.play(); this.mp4Player.play();
})
} }
}, },
destroyed() { destroyed() {
this.flvPlayer && this.flvPlayer.unload(); // this.flvPlayer && this.flvPlayer.unload();
this.flvPlayer && this.flvPlayer.detachMediaElement() // this.flvPlayer && this.flvPlayer.detachMediaElement()
this.flvPlayer && this.flvPlayer.destroy(); this.flvPlayer && this.flvPlayer.destroy();
this.mp4Player && this.mp4Player.pause()
this.mp4Player && this.mp4Player.dispose(); this.mp4Player && this.mp4Player.dispose();
this.mp4Player = null;
this.flvPlayer = null;
// this.mp4Player && this.mp4Player.pause()
} }
} }
</script> </script>
\ No newline at end of file
...@@ -364,7 +364,7 @@ ...@@ -364,7 +364,7 @@
<el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px" <el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px"
:destroyOnClose="true"> :destroyOnClose="true">
<div style="text-align: center;" v-loading="loadings"> <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> </el-image>
</div> </div>
</el-dialog> </el-dialog>
...@@ -970,6 +970,7 @@ export default { ...@@ -970,6 +970,7 @@ export default {
convertBMPtoPNG(bmpImage, callback) { convertBMPtoPNG(bmpImage, callback) {
// 创建一个新的 Image 对象 // 创建一个新的 Image 对象
const img = new Image(); const img = new Image();
img.setAttribute("crossOrigin",'Anonymous')
img.onload = function () { img.onload = function () {
// 创建一个 Canvas 元素 // 创建一个 Canvas 元素
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
...@@ -1569,5 +1570,10 @@ export default { ...@@ -1569,5 +1570,10 @@ export default {
} }
} }
} }
.imgs{
.el-image__preview{
object-fit: contain;
}
}
} }
</style> </style>
...@@ -364,7 +364,7 @@ ...@@ -364,7 +364,7 @@
<el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px" <el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px"
:destroyOnClose="true"> :destroyOnClose="true">
<div style="text-align: center;" v-loading="loadings"> <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> </el-image>
</div> </div>
</el-dialog> </el-dialog>
...@@ -967,6 +967,32 @@ export default { ...@@ -967,6 +967,32 @@ export default {
this.searchs(1); this.searchs(1);
this.wjfx_qh = true; 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() { mounted() {
let _this = this; let _this = this;
...@@ -1544,5 +1570,10 @@ export default { ...@@ -1544,5 +1570,10 @@ export default {
} }
} }
} }
.imgs{
.el-image__preview{
object-fit: contain;
}
}
} }
</style> </style>
...@@ -365,7 +365,7 @@ ...@@ -365,7 +365,7 @@
<el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px" <el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px"
:destroyOnClose="true"> :destroyOnClose="true">
<div style="text-align: center;" v-loading="loadings"> <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> </el-image>
</div> </div>
</el-dialog> </el-dialog>
...@@ -1023,6 +1023,7 @@ export default { ...@@ -1023,6 +1023,7 @@ export default {
convertBMPtoPNG(bmpImage, callback) { convertBMPtoPNG(bmpImage, callback) {
// 创建一个新的 Image 对象 // 创建一个新的 Image 对象
const img = new Image(); const img = new Image();
img.setAttribute("crossOrigin",'Anonymous')
img.onload = function () { img.onload = function () {
// 创建一个 Canvas 元素 // 创建一个 Canvas 元素
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
...@@ -1639,5 +1640,10 @@ export default { ...@@ -1639,5 +1640,10 @@ export default {
} }
} }
} }
.imgs{
.el-image__preview{
object-fit: contain;
}
}
} }
</style> </style>
...@@ -387,7 +387,7 @@ ...@@ -387,7 +387,7 @@
<el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px" <el-dialog :title="title_img" :visible.sync="centerDialogVisible_img" center width="800px"
:destroyOnClose="true"> :destroyOnClose="true">
<div style="text-align: center;" v-loading="loadings"> <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> </el-image>
</div> </div>
</el-dialog> </el-dialog>
...@@ -1593,6 +1593,7 @@ export default { ...@@ -1593,6 +1593,7 @@ export default {
convertBMPtoPNG(bmpImage, callback) { convertBMPtoPNG(bmpImage, callback) {
// 创建一个新的 Image 对象 // 创建一个新的 Image 对象
const img = new Image(); const img = new Image();
img.setAttribute("crossOrigin",'Anonymous')
img.onload = function () { img.onload = function () {
// 创建一个 Canvas 元素 // 创建一个 Canvas 元素
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
...@@ -2354,6 +2355,11 @@ export default { ...@@ -2354,6 +2355,11 @@ export default {
background-color: #00648a96 !important; background-color: #00648a96 !important;
// border-radius: 5px; // border-radius: 5px;
} }
.imgs{
.el-image__preview{
object-fit: contain;
}
}
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment