在视频/图片中标识出部分区域（该区域位置通过后端传参计算得出）

本文链接：https://blog.csdn.net/m0_53562074/article/details/126835766

【需求描述】

在图片/视频中画出一个框，框的大小和位置通过后端返回的数据计算（后端返回左上角点的坐标的百分比、宽高的百分比）
当前图片 / 视频在一个抽屉层组件中

【实现思路】

在图片/视频标签外套一个容器，
在容器中与图片/视频同级处写一个画框的盒子，
画框的盒子：用该盒子的边框来标识要框的区域（宽、高、top、left 初始值为0）
使用父相子绝将该 “画框的盒子” 定位在图片上

代码

html

<div class="asset">
  <div class="image">  <!-- 【图片外层包的容器】 -->
    <div id="draw" class="draw"> </div> <!-- 【画框的盒子】 -->
    <el-image 
      id="image"
      :src="znfxjgInfo.imageurl" 
    >
    <!-- :preview-src-list="[znfxjgInfo.imageurl]" -->
    </el-image>
  </div>
  <video controls autoplay muted>
    <source :src="znfxjgInfo.videourl" type="video/mp4">
    您的浏览器不支持 video 标签。
  </video>
</div>

【侦听对话框】

侦听对话框是否为打开

watch: {
  dialogVisible: {
    handler(val && this.warningData && this.warningData.sjly === '3') {
      setTimeout(() => { // 使用延时器，不然可能取不到 dom
        if(val) { 
          this.drawHandler() // 画框框
          window.addEventListener("resize", this.drawHandler, false) // 页面添加resize事件，避免浏览器窗口大小改变时框的区域不变
        }
      }, 100)
    }
  }
},

【画框调用的方法】计算框的宽高和定位的位置

// 画框框
drawHandler() {
  let image =  document.getElementById('image') // 取图片的 dom
  let draw =  document.getElementById('draw') // 取画框框的 dom
  console.log('image----', image)
  const imageWidth = image.offsetWidth // 取图片的宽
  const imageHeight = image.offsetHeight // 取图片的高
  let top = this.znfxjgInfo.eodrY * imageHeight // 计算画的框的 top
  let left = this.znfxjgInfo.eodrX * imageWidth // 计算画的框的 left
  let width = this.znfxjgInfo.eodrW * imageWidth // 计算画的框的宽
  let height = this.znfxjgInfo.eodrH * imageHeight // 计算画的框的高
  // 设置画的框的 宽高、定位位置
  draw.style.top = top + 'px'
  draw.style.left = left + 'px'
  draw.style.width = width + 'px'
  draw.style.height = height + 'px'
}

【最后记得】销毁当前页面（抽屉层）时将 resize 事件移除掉

destroyed () {
  window.removeEventListener('resize', this.drawHandler, false)
}

【样式】

.asset {
  background-color: #f9f9f9;
  padding: 0 80px;
  
  .image {
    position: relative;
    width: 100%;
    .el-image {
      width: 100%;
    }
    // 标识区域
    .draw {
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid red;
      z-index: 1;
    }
  }
  video {
    width: 100%;
  }
}