Skip to content

X
xxx_phase2_web
Commit 99aa173f authored by 高飞's avatar 高飞
Browse files
Options

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

parent 07f0cf39
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 32 deletions
src/components/common/video_player.vue
View file @ 99aa173f
......@@ -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
View file @ 99aa173f
......@@ -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
View file @ 99aa173f
......@@ -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
View file @ 99aa173f
......@@ -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
View file @ 99aa173f
......@@ -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>
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