161 lines
4.1 KiB
Vue
161 lines
4.1 KiB
Vue
<template>
|
||
<!-- <div class="myArea"> -->
|
||
<Dialog
|
||
modal-class="dialog_class"
|
||
:title="dialogTitle"
|
||
v-model="dialogVisible"
|
||
:modal="false"
|
||
append-to-body
|
||
style="width: 700px; height: 520px"
|
||
:close-on-click-modal="false"
|
||
:close-on-press-escape="false"
|
||
:destroy-on-close="true"
|
||
>
|
||
<div class="mycontainer">
|
||
<div class="myleft-div" >
|
||
<vue3VideoPlay id="videoScreenShot" crossorign="anonymous" v-bind="options"/>
|
||
</div>
|
||
<div class="myright-div">
|
||
<el-button
|
||
@click="capture"
|
||
style="background-color: rgb(28, 176, 117); font-size: 14; color: rgb(255, 255, 255)"
|
||
><el-icon><PictureFilled /></el-icon> 截图</el-button
|
||
>
|
||
<canvas id="myCanvas" style="display: none" crossorign="anonymous" ></canvas>
|
||
</div>
|
||
</div>
|
||
</Dialog>
|
||
<!-- </div> -->
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { ultrasoniccomApi, insimagescreenshotVO } from '@/api/ultrasoniccom'
|
||
import html2canvas from 'html2canvas';
|
||
const message = useMessage() // 消息弹窗
|
||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||
const dialogTitle = ref('') // 弹窗的标题
|
||
|
||
const id = ref() //患者ID
|
||
/** 打开弹窗 */
|
||
const open = (regId: String) => {
|
||
dialogVisible.value = true
|
||
dialogTitle.value = ''
|
||
id.value = regId
|
||
GetimgUrl()
|
||
}
|
||
|
||
// 播放器配置选项
|
||
const options = reactive({
|
||
width: '500px', //播放器高度
|
||
height: '420px', //播放器高度
|
||
color: '#409eff', //主题色
|
||
title: '', //视频名称
|
||
src: '', //视频源
|
||
type:'video/mp4',
|
||
muted: false, //静音
|
||
webFullScreen: false,
|
||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||
autoPlay: false, //自动播放
|
||
loop: false, //循环播放
|
||
mirror: false, //镜像画面
|
||
ligthOff: false, //关灯模式
|
||
volume: 0, //默认音量大小
|
||
control: true, //是否显示控制
|
||
controlBtns: ['audioTrack', 'speedRate', 'volume'] //显示所有按钮,
|
||
})
|
||
// 获取当前患者的视频
|
||
const GetimgUrl=async ()=>
|
||
{
|
||
const data= await ultrasoniccomApi.getImageVideo(id.value)
|
||
options.src = data+'?t='+new Date().getTime()
|
||
}
|
||
|
||
//捕获截图
|
||
const capture = () => {
|
||
|
||
|
||
// 获取video和canvas元素
|
||
const video = document.getElementById('videoScreenShot')
|
||
const canvas = document.getElementById('myCanvas')
|
||
// 设置目标图片的大小
|
||
const targetWidth = 400 // 目标宽度
|
||
const targetHeight = 400 // 目标高度
|
||
|
||
// 设置canvas尺寸为目标大小
|
||
canvas.width = targetWidth
|
||
canvas.height = targetHeight
|
||
|
||
// 获取canvas的2d绘图上下文
|
||
const context = canvas.getContext('2d')
|
||
|
||
// 将当前video帧绘制到canvas上，不进行缩放
|
||
context.drawImage(
|
||
video,
|
||
0,
|
||
0,
|
||
video.videoWidth,
|
||
video.videoHeight,
|
||
0,
|
||
0,
|
||
targetWidth,
|
||
targetHeight
|
||
)
|
||
|
||
// 将canvas内容转换为data URL，即Base64编码的图像
|
||
const imageDataUrl = canvas.toDataURL('image/jpeg', 0.7) // 第二个参数是JPEG质量参数，范围是0到1
|
||
saveimage(imageDataUrl)
|
||
// 下载图片
|
||
// downloadImage(imageDataUrl);
|
||
}
|
||
// 保存截图
|
||
const saveimage = async (imageDataUrl) => {
|
||
await ultrasoniccomApi.ftpimage({ id: id.value, imagebase: imageDataUrl })
|
||
message.notifySuccess('请刷新右侧图片')
|
||
}
|
||
|
||
//下载图片
|
||
const downloadImage = (dataUrl) => {
|
||
const link = document.createElement('a')
|
||
link.href = dataUrl
|
||
const now = new Date()
|
||
link.download = now.toLocaleString() + '监控视频.JPEG'
|
||
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
}
|
||
/** 视频组件 */
|
||
defineOptions({ name: 'VideoForm' })
|
||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* .myArea{
|
||
pointer-events: none;
|
||
}
|
||
.myArea :deep(.myVideo) {
|
||
pointer-events: auto;
|
||
} */
|
||
|
||
.dialog_class {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.el-dialog {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.mycontainer {
|
||
display: flex; /* 启用 Flexbox */
|
||
}
|
||
.myleft-div {
|
||
width: 80%; /* 左侧 div 宽度 */
|
||
/* background-color: #f2f2f2; */ /* 背景颜色 */
|
||
}
|
||
.myright-div {
|
||
width: 15%; /* 右侧 div 宽度 */
|
||
/* background-color: #ddd; */ /* 背景颜色 */
|
||
}
|
||
</style>
|