修改视频回访 截图方法

src/views/ultrasoniccom/videoForm.vue

@@ -12,8 +12,8 @@
     :destroy-on-close="true"
   >
     <div class="mycontainer">
-      <div class="myleft-div">
-        <vue3VideoPlay id="videoScreenShot" crossorigin="anonymous" v-bind="options" />
+      <div class="myleft-div" >
+        <vue3VideoPlay id="videoScreenShot" crossorign="anonymous" v-bind="options"/>
       </div>
       <div class="myright-div">
         <el-button
@@ -21,8 +21,7 @@
           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"></canvas>
+        <canvas id="myCanvas" style="display: none" crossorign="anonymous" ></canvas>
       </div>
     </div>
   </Dialog>
@@ -32,7 +31,7 @@
 <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('') // 弹窗的标题
@@ -53,7 +52,7 @@ const options = reactive({
   color: '#409eff', //主题色
   title: '', //视频名称
   src: '', //视频源
-  type: 'm3u8', //视频类型
+  type:'video/mp4',
   muted: false, //静音
   webFullScreen: false,
   speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
@@ -69,15 +68,16 @@ const options = reactive({
 const GetimgUrl=async ()=>
 {
   const data= await ultrasoniccomApi.getImageVideo(id.value)
-   options.src = data
+   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 // 目标高度
@@ -104,14 +104,13 @@ const capture = () => {
 
   // 将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.insimagescreenshot({ id: id.value, imagebase: imageDataUrl })
+  await ultrasoniccomApi.ftpimage({ id: id.value, imagebase: imageDataUrl })
   message.notifySuccess('请刷新右侧图片')
 }