feat: 封装对比查看组件

src/views/demo/components/PreviewCompareImages.vue

@@ -1,7 +1,11 @@
-<!-- 
-  @Date: 2024-10-29
-  @Author: ©WANGKANG
-  @Email: 1686617586@qq.com
+<!--
+  @Datetime : 2024-12-02 09:30:19
+  @Author   : WANGKANG
+  @Email    : 1686617586@qq.com
+  @Blog     : 
+  @File     : PreviewCompareImages.vue
+  @brief    : 对比预览组件
+  Copyright 2024 WANGKANG, All Rights Reserved.
 -->
 <template>
   <el-dialog
@@ -14,19 +18,33 @@
       <el-form-item label="帧率">
         <el-select v-model="imageFps" placeholder="选择帧率" style="width: 200px" @change="changeFps">
           <el-option label="0" value="0"></el-option>
+          <el-option label="1" value="1"></el-option>
           <el-option label="5" value="5"></el-option>
           <el-option label="15" value="15"></el-option>
           <el-option label="30" value="30"></el-option>
+          <el-option label="60" value="60"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="跳转至">
         <el-input v-model="newImageIdx" type="number" style="width: 100px" />
         <el-button type="primary" @click="confirmNewImageIdx" style="margin-left: 10px">确认</el-button>
       </el-form-item>
+      <el-form-item label="播放模式">
+        <el-select v-model="playMode" placeholder="选择播放模式" style="width: 200px" @change="changePlayMode" :disabled="imageFps == 0">
+          <el-option label="顺序播放" value="normal"></el-option>
+          <el-option label="倒序播放" value="reverse"></el-option>
+          <el-option label="循环播放" value="loop"></el-option>
+          <el-option label="前后循环播放" value="ping-pong"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="start" :disabled="imageFps == 0">开始</el-button>
+        <el-button @click="pause" :disabled="imageFps == 0">暂停</el-button>
+      </el-form-item>
     </el-form>
     <div class="image-dialog">
-      <el-image :src="'/api' + imageUrlList[imageIdx].inputUrl" style="width: 45%"></el-image>
-      <el-image :src="'/api' + imageUrlList[imageIdx].outputUrl" style="width: 45%"></el-image>
+      <canvas class="frame-canvas" ref="canvasInputRef"></canvas>
+      <canvas class="frame-canvas" ref="canvasOutputRef"></canvas>
     </div>
     <div class="image-dialog-btn" v-if="imageFps == 0">
       <el-button type="primary" @click="pre_picture" :disabled="imageIdx <= 0">上一个</el-button>
@@ -37,18 +55,65 @@
 
 <script setup lang="ts">
 import { ElMessageBox } from 'element-plus'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+
+const canvasInputRef = ref()
+const canvasOutputRef = ref()
+const contextInput = ref(null)
+const contextOutput = ref(null)
+
+const updateCanvas__ = (canvasRef: any, context: any, type__: string) => {
+  const canvas = canvasRef.value
+  let img = new Image()
+  img.src = '/api' + imageUrlList.value[imageIdx.value][type__]
+  img.onload = () => {
+    if (canvas.width !== img.width) {
+      canvas.width = img.width
+    }
+    if (canvas.height !== img.height) {
+      canvas.height = img.height
+    }
+    context.value.clearRect(0, 0, canvas.width, canvas.height)
+    context.value.drawImage(img, 0, 0)
+  }
+}
+
+const updateCanvas = () => {
+  if (!contextInput.value) {
+    contextInput.value = canvasInputRef.value.getContext('2d')
+  }
+  if (!contextOutput.value) {
+    contextOutput.value = canvasOutputRef.value.getContext('2d')
+  }
+  updateCanvas__(canvasInputRef, contextInput, 'inputUrl')
+  updateCanvas__(canvasOutputRef, contextOutput, 'outputUrl')
+}
+
+const dialogVisible = ref(false)
+const imageFps = ref(0)
+const intervalChangeFps: any = ref()
+const imageIdx = ref(0)
+const imageUrlList = ref<any[]>([])
+const newImageIdx = ref()
+const playMode = ref('normal')
+const step = ref(1) // 步长 始终>0
+const flag_direction = ref(1) // 方向 >0 正向，<0 反向
 
 const handleOpen = async (api: any, params: any) => {
   dialogVisible.value = true
   imageIdx.value = 0
   imageFps.value = 0
   newImageIdx.value = ''
+  imageUrlList.value = []
+  playMode.value = 'normal'
+  step.value = 1
+  flag_direction.value = 1
 
   const res: any = await api(params)
   if (res.code == 200) {
     imageUrlList.value = res.data
     if (res.data.length >= 1) {
+      updateCanvas()
       return true
     } else {
       return false
@@ -59,23 +124,33 @@ const handleOpen = async (api: any, params: any) => {
   }
 }
 
-const dialogVisible = ref(false)
-const imageFps = ref(0)
-const intervalChangeFps: any = ref()
-const imageIdx = ref(0)
-const imageUrlList = ref<any[]>([])
-const newImageIdx = ref()
+const closeDialog = () => {
+  dialogVisible.value = false
+}
 
-const handleClose = (done: () => void) => {
-  console.log('handleClose')
+const start = () => {
+  console.log('start')
+  pause()
+
+  if (imageFps.value == 0) {
+    return
+  }
+
+  intervalChangeFps.value = setInterval(() => {
+    next_picture_auto()
+  }, 1000 / imageFps.value)
+}
+
+const pause = () => {
   if (intervalChangeFps.value) {
     clearInterval(intervalChangeFps.value)
   }
-  done()
 }
 
-const closeDialog = () => {
-  dialogVisible.value = false
+const handleClose = (done: () => void) => {
+  console.log('handleClose')
+  pause()
+  done()
 }
 
 const confirmNewImageIdx = () => {
@@ -85,38 +160,80 @@ const confirmNewImageIdx = () => {
   } else {
     ElMessageBox.alert('跳转索引有误，请检查！')
   }
+  updateCanvas()
 }
 
 const changeFps = () => {
-  console.log('changeFps')
-  if (intervalChangeFps.value) {
-    clearInterval(intervalChangeFps.value)
+  if (imageFps.value == 0) {
+    pause()
+  } else {
+    start()
   }
+}
 
-  if (imageFps.value == 0) {
-    return
+const changePlayMode = () => {
+  switch (playMode.value) {
+    case 'normal':
+      flag_direction.value = 1
+      break
+    case 'reverse':
+      flag_direction.value = -1
+      break
+    default:
+      break
   }
+}
 
-  intervalChangeFps.value = setInterval(() => {
+const next_picture_auto = () => {
+  if (playMode.value == 'normal') {
     next_picture()
-  }, 1000 / imageFps.value)
+  } else if (playMode.value == 'reverse') {
+    pre_picture()
+  } else if (playMode.value == 'loop') {
+    imageIdx.value = (imageIdx.value + step.value) % imageUrlList.value.length
+    updateCanvas()
+  } else if (playMode.value == 'ping-pong') {
+    if (flag_direction.value > 0) {
+      if (has_next_picture()) {
+        next_picture()
+      } else {
+        flag_direction.value = -1
+      }
+    } else {
+      if (has_pre_picture()) {
+        pre_picture()
+      } else {
+        flag_direction.value = 1
+      }
+    }
+  }
+}
+
+const has_next_picture = () => {
+  return imageIdx.value < imageUrlList.value.length - step.value
+}
+
+const has_pre_picture = () => {
+  return imageIdx.value >= step.value
 }
 
 const next_picture = () => {
-  if (imageIdx.value < imageUrlList.value.length - 1) {
-    imageIdx.value += 1
+  if (has_next_picture()) {
+    imageIdx.value += step.value
   }
+  updateCanvas()
 }
 
 const pre_picture = () => {
-  if (imageIdx.value > 0) {
-    imageIdx.value -= 1
+  if (has_pre_picture()) {
+    imageIdx.value -= step.value
   }
+  updateCanvas()
 }
 
 defineExpose({
-  handleOpen: handleOpen,
-  closeDialog: closeDialog
+  handleOpen,
+  closeDialog
 })
 </script>
 
@@ -134,4 +251,11 @@ defineExpose({
   justify-content: center;
   margin-top: 20px;
 }
+.frame-canvas {
+  display: flex;
+  width: 100%;
+  max-width: 800px;
+  height: 100%;
+  max-height: 600px;
+}
 </style>