web端实现视频局部放大功能

---

前言

近期项目遇到一个需求：视频局部放大功能。具体来讲需要实现监控视频画面向右下方拉框松开后该区域放大显示，且可在已放大视频画面上继续拉框放大，向其他方向拉框松开后视频还原。从刚开始毫无思路到功能的完美实现着实花了不少功夫，接下来笔者将自己的实现过程分享如下：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现逻辑

播放器画面框选部分区域----》记录框选区域大小及位置----》计算放大倍数----》移动放大后视频使框选部分在播放器窗口区域显示----》还原播放器画面

二、代码实现

详细代码实现如下如下（示例）：

<template>
  <div>
    <!--原视频区域-->
    <div class="video" ref="videoBox">
      <LivePlayer
        v-show="videoShow"
        :videoUrl="videoUrl"
        live
      />
      <!--拖拽选择框-->
      <div ref="rectArea" class="rect"></div>
      <!--放大后视频区域-->
      <div ref="videoZoom" class="video-zoom">
        <LivePlayer
          v-show="videoZoomShow"
          :videoUrl="videoUrl"
          live
        />
      </div>
    </div>
  </div>
</template>
<script>
import LivePlayer from  '@liveqing/liveplayer'
export default {
   
  name: 'monitorDetail',
  components: {
   
    LivePlayer
  },
  data() {
   
    return {
   
      videoZoomShow: false,
      videoShow: true,
      videoZoomFlag: false,
      player: {
   },
      videoUrl: '',
      // 视频播放窗口起始点位置
      top: 0,
      left: 0,
      // 记录鼠标按下时的坐标
      downX: 0,
      downY: 0,
      // 记录鼠标抬起时候的坐标
      mouseX2: 0,
      mouseY2: 0,
      //拖拽选择框DOM元素
      rect: null,
      // 是否需要(允许)处理鼠标的移动事件,默认识不处理
      select: false,
      // 监控局部放大请求数据
      rectInfo: {
   
        videoWidth: 0,
        videoHeight: 0,
        rectWidth: 0,
        rectHeight: 0,
        rectCenterOffsetX: 0,
        rectCenterOffsetY: 0
      }
    }
  },
  mounted() {
   
    this.getVideoUrl()
  },
  methods: {
   
    //  为视频播放窗口初始化拉框放大功能
    rectZoomInit() {
   
      this.$refs.videoBox.addEventListener('mousedown', this.down)
      this.$refs.videoBox.addEventListener('mousemove', this.move)
    },
    // 鼠标按下
    down($event) {
   
      if (!this.rect) {
   
        // 获取鼠标按下时的坐标位置
        this.downX = $event.clientX
        this.downY = $event.clientY
        // 鼠标按下时才允许处理鼠标的移动事件
        this.select = true
        this.rect =