feat: 封装图片预览组件

src/views/demo/components/PreviewImages.vue

@@ -2,7 +2,7 @@
 # @Date: 2024-10-11 14:37:11
 # @Author: WANGKANG
 # @Blog:
-# @Email:
+# @Email: 1686617586@qq.com
 # @Filepath: src\views\demo\components\PreviewImages.vue
 # @Description: PreviewImages.vue
 # Copyright 2024 WANGKANG, All Rights Reserved.
@@ -11,31 +11,44 @@
 <template>
   <el-dialog
     v-model="dialogVisible"
-    :title="'预览 - 共' + currentImageUrls.length + '张 当前第' + (imageIdx + 1) + '张'"
+    :title="'预览 - 共' + imageUrlList.length + '张 当前第' + (imageIdx + 1) + '张'"
     width="80%"
-    @open="handleOpen"
     :before-close="handleClose"
   >
     <el-form :inline="true">
       <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' + currentImageUrls[imageIdx]" style="width: 40%"></el-image>
+      <canvas class="frame-canvas" ref="canvasRef"></canvas>
     </div>
     <div class="image-dialog-btn" v-if="imageFps == 0">
       <el-button type="primary" @click="pre_picture" :disabled="imageIdx <= 0">上一个</el-button>
-      <el-button type="primary" @click="next_picture" :disabled="imageIdx >= currentImageUrls.length - 1">下一个</el-button>
+      <el-button type="primary" @click="next_picture" :disabled="imageIdx >= imageUrlList.length - 1">下一个</el-button>
     </div>
   </el-dialog>
 </template>
@@ -44,80 +57,174 @@
 import { ElMessageBox } from 'element-plus'
 import { ref, watch } from 'vue'
 
-const props = defineProps({
-  visible: {
-    type: Boolean, //接受的数据类型
-    default: false //接受默认数据
-  },
-  urls: {
-    type: Array,
-    default: () => []
-  }
-})
+const canvasRef = ref()
+const context = ref(null)
 
-watch(
-  () => props.visible,
-  val => {
-    dialogVisible.value = val
+const updateCanvas = () => {
+  const canvas = canvasRef.value
+  if (!context.value) {
+    context.value = canvas.getContext('2d')
+  }
+  let img = new Image()
+  img.src = '/api' + imageUrlList.value[imageIdx.value]
+  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 handleOpen = () => {
-  currentImageUrls.value = props.urls
-  imageIdx.value = 0
-  imageFps.value = 0
 }
 
 const dialogVisible = ref(false)
 const imageFps = ref(0)
 const intervalChangeFps: any = ref()
 const imageIdx = ref(0)
-const currentImageUrls = ref<any[]>([])
+const imageUrlList = ref<any[]>([])
 const newImageIdx = ref()
+const playMode = ref('normal')
+const step = ref(1) // 步长 始终>0
+const flag_direction = ref(1) // 方向 >0 正向，<0 反向
 
-const handleClose = (done: () => void) => {
-  console.log('handleClose')
+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
+    }
+  } else {
+    ElMessageBox.alert(res.message)
+    return false
+  }
+}
+
+const closeDialog = () => {
+  dialogVisible.value = false
+}
+
+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)
   }
+}
+
+const handleClose = (done: () => void) => {
+  console.log('handleClose')
+  pause()
   done()
 }
 
 const confirmNewImageIdx = () => {
   const val = parseInt(newImageIdx.value)
-  if (val > 0 && val <= currentImageUrls.value.length) {
+  if (val > 0 && val <= imageUrlList.value.length) {
     imageIdx.value = val - 1
   } 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 < currentImageUrls.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,
+  closeDialog
+})
 </script>
 
 <style scoped lang="scss">
@@ -134,4 +241,11 @@ const pre_picture = () => {
   justify-content: center;
   margin-top: 20px;
 }
+.frame-canvas {
+  display: flex;
+  width: 100%;
+  max-width: 800px;
+  height: 100%;
+  max-height: 600px;
+}
 </style>