taais-web/src/views/demo/components/PreviewImages.vue

<!--
# @Date: 2024-10-11 14:37:11
# @Author: WANGKANG
# @Blog:
# @Email: 1686617586@qq.com
# @Filepath: src\views\demo\components\PreviewImages.vue
# @Description: PreviewImages.vue
# Copyright 2024 WANGKANG, All Rights Reserved.
-->

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="'预览 - 共' + imageUrlList.length + '张 当前第' + (imageIdx + 1) + '张'"
    width="80%"
    :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">
      <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 >= imageUrlList.length - 1">下一个</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import { ref, watch } from 'vue'

const canvasRef = ref()
const context = ref(null)

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 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
    }
  } 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 <= imageUrlList.value.length) {
    imageIdx.value = val - 1
  } else {
    ElMessageBox.alert('跳转索引有误，请检查！')
  }
  updateCanvas()
}

const changeFps = () => {
  if (imageFps.value == 0) {
    pause()
  } else {
    start()
  }
}

const changePlayMode = () => {
  switch (playMode.value) {
    case 'normal':
      flag_direction.value = 1
      break
    case 'reverse':
      flag_direction.value = -1
      break
    default:
      break
  }
}

const next_picture_auto = () => {
  if (playMode.value == 'normal') {
    next_picture()
  } 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 (has_next_picture()) {
    imageIdx.value += step.value
  }
  updateCanvas()
}

const pre_picture = () => {
  if (has_pre_picture()) {
    imageIdx.value -= step.value
  }
  updateCanvas()
}

defineExpose({
  handleOpen,
  closeDialog
})
</script>

<style scoped lang="scss">
.image-dialog {
  display: flex;
  justify-content: center;
  .el-image {
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
.image-dialog-btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.frame-canvas {
  display: flex;
  width: 100%;
  max-width: 800px;
  height: 100%;
  max-height: 600px;
}
</style>