lxd/FlowVue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改视频回访 截图方法

Browse Source
This commit is contained in:
lxd 2024-09-18 17:15:07 +08:00
parent 8463a7a36b
commit aa112dd24f
1 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/ultrasoniccom/videoForm.vue
View File

@ -12,8 +12,8 @@
:destroy-on-close="true" :destroy-on-close="true"
> >
<div class="mycontainer"> <div class="mycontainer">
<div class="myleft-div"> <div class="myleft-div" >
<vue3VideoPlay id="videoScreenShot" crossorigin="anonymous" v-bind="options" /> <vue3VideoPlay id="videoScreenShot" crossorign="anonymous" v-bind="options"/>
</div> </div>
<div class="myright-div"> <div class="myright-div">
<el-button <el-button
@ -21,8 +21,7 @@
style="background-color: rgb(28, 176, 117); font-size: 14; color: rgb(255, 255, 255)" style="background-color: rgb(28, 176, 117); font-size: 14; color: rgb(255, 255, 255)"
><el-icon><PictureFilled /></el-icon> 截图</el-button ><el-icon><PictureFilled /></el-icon> 截图</el-button
> >
<canvas id="myCanvas" style="display: none" crossorign="anonymous" ></canvas>
<canvas id="myCanvas" style="display: none"></canvas>
</div> </div>
</div> </div>
</Dialog> </Dialog>
@ -32,7 +31,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { ultrasoniccomApi, insimagescreenshotVO } from '@/api/ultrasoniccom' import { ultrasoniccomApi, insimagescreenshotVO } from '@/api/ultrasoniccom'
import html2canvas from 'html2canvas';
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示 const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题 const dialogTitle = ref('') // 弹窗的标题
@ -53,7 +52,7 @@ const options = reactive({
color: '#409eff', //主题色 color: '#409eff', //主题色
title: '', //视频名称 title: '', //视频名称
src: '', //视频源 src: '', //视频源
type: 'm3u8', //视频类型 type:'video/mp4',
muted: false, //静音 muted: false, //静音
webFullScreen: false, webFullScreen: false,
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速 speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
@ -69,15 +68,16 @@ const options = reactive({
const GetimgUrl=async ()=> const GetimgUrl=async ()=>
{ {
const data= await ultrasoniccomApi.getImageVideo(id.value) const data= await ultrasoniccomApi.getImageVideo(id.value)
options.src = data options.src = data+'?t='+new Date().getTime()
} }
//捕获截图 //捕获截图
const capture = () => { const capture = () => {
// 获取video和canvas元素 // 获取video和canvas元素
const video = document.getElementById('videoScreenShot') const video = document.getElementById('videoScreenShot')
const canvas = document.getElementById('myCanvas') const canvas = document.getElementById('myCanvas')
// 设置目标图片的大小 // 设置目标图片的大小
const targetWidth = 400 // 目标宽度 const targetWidth = 400 // 目标宽度
const targetHeight = 400 // 目标高度 const targetHeight = 400 // 目标高度
@ -104,14 +104,13 @@ const capture = () => {
// 将canvas内容转换为data URL，即Base64编码的图像 // 将canvas内容转换为data URL，即Base64编码的图像
const imageDataUrl = canvas.toDataURL('image/jpeg', 0.7) // 第二个参数是JPEG质量参数，范围是0到1 const imageDataUrl = canvas.toDataURL('image/jpeg', 0.7) // 第二个参数是JPEG质量参数，范围是0到1
saveimage(imageDataUrl) saveimage(imageDataUrl)
// 下载图片 // 下载图片
// downloadImage(imageDataUrl); // downloadImage(imageDataUrl);
} }
// 保存截图 // 保存截图
const saveimage = async (imageDataUrl) => { const saveimage = async (imageDataUrl) => {
await ultrasoniccomApi.insimagescreenshot({ id: id.value, imagebase: imageDataUrl }) await ultrasoniccomApi.ftpimage({ id: id.value, imagebase: imageDataUrl })
message.notifySuccess('请刷新右侧图片') message.notifySuccess('请刷新右侧图片')
} }