记一次根据图片原尺寸设置样式，并进行缩放和拖拽

话不多说直接上代码，注释很详细，有不懂的可以直接问我

<template>
  <!--分窗满窗--照片查看组件-->
  <div :id="currentId"
       @mousewheel.stop="wheelToScalingTheImage"
       class="image-viewer-in-segmentation-model segmentation-image-viewer">
      <img @load="getImageNaturalSize()"
           @mousedown.stop="dragTheImage"
           @mousemove.stop="imageMoveStarts"
           @mouseup.stop="imageMoveEnds"
           class="image-con"
           :id="currentImgId"
           :src="imageSourceUrl" alt="照片查看">
  </div>
</template>

<script>
    export default {
        data() {
            return {
              natural_width: 0,//图片资源的原始宽度
              natural_height: 0,//图片资源的原始高度
              client_width: 0,//初始时图片的预设宽度
              client_height: 0,//初始时图片的预设高度
              min_width:0,//最小可缩放至
              maxScale:0,//最大缩放程度
              offset_x:0,//拖动时鼠标指针x方向的偏移量
              offset_y:0,//拖动时鼠标指针y方向的偏移量
              is_movable: false,//当前是否可拖动
            }
        },
        props:['imageSourceUrl','currentLoad'],
        methods: {
          //获取图片原始宽高
          getImageNaturalSize(){
            debugger
            let image_con = document.getElementById(this.currentImgId);
            // let image_con = document.querySelector('.image-con');
            this.natural_width = image_con.naturalWidth;
            this.natural_height = image_con.naturalHeight;
            this.client_width = image_con.clientWidth;
            this.client_height = image_con.clientHeight;
            let CLIENT_WIDTH, CLIENT_HEIGHT ;
            if(this.natural_width > this.natural_height){
              image_con.style.height = 'auto';
              image_con.style.width = '100%';
            }
            CLIENT_WIDTH = image_con.clientWidth / 16 + 'rem'
            CLIENT_HEIGHT = image_con.clientHeight / 16 + 'rem'
            image_con.style.left = `calc((100% - ${CLIENT_WIDTH}) / 2)`;
            image_con.style.top = `calc((100% - ${CLIENT_HEIGHT}) / 2)`;
            this.maxScale = this.natural_height / this.client_height;
            this.min_width = this.natural_width / this.maxScale;
            let minScale = 0.5;
            console.log("照片的原始尺寸是:",this.natural_width+ 'x'+ this.natural_height);
          },
          //滚动鼠标滚轮对图片进行缩放
          wheelToScalingTheImage(event){
            let _this = this;
            let direction = _this.handleScrollDirection(event);
            let image_con = document.getElementById(this.currentImgId);
            // let image_con = document.querySelector('.image-con');
            let out_count = 0,in_count = 0;
            if(direction === 'up'){
              if(out_count < this.maxScale - 1){
                out_count ++;
                in_count = out_count
                image_con.style.height = this.natural_height * ((out_count + 1) / this.maxScale) / 16 +'rem';
                image_con.style.width = this.natural_width * ((out_count + 1) / this.maxScale) / 16 +'rem';
              }
              else if(out_count >= this.maxScale - 1){
                out_count = this.maxScale;
                in_count = out_count;
                image_con.style.height = this.natural_height / 16 + 'rem';
                image_con.style.width = this.natural_width / 16 + 'rem';
              }
            }
            else if(direction === 'down'){
              if(in_count > 1){
                in_count--;
                out_count = in_count;
                image_con.style.height = this.natural_height * ((in_count + 1) / this.maxScale) / 16 +'rem';
                image_con.style.width = this.natural_width * ((in_count + 1) / this.maxScale) / 16 +'rem';
              }
              else if(in_count <= 1){
                in_count = 1;
                out_count = in_count;
                image_con.style.height = this.client_height / 16 +'rem';
                image_con.style.width = 'auto';
              }
            }
          },
          //判断滚轮的滚动方向，以判断是放大或是缩小行为
          handleScrollDirection(e) {
            let direction = e.deltaY > 0 ? 'down' : 'up';
            return direction;
          },
          //拖拽图片到指定位置
          dragTheImage(event){
            if(event.button == 0){
              this.is_movable = true;
              //获取被拖动的元素
              let image_con = document.getElementById(this.currentImgId);
//为了兼容IE8  下面这行代码表示你有这个就执行
              //浏览器有一个默认行为 就是你选种的元素有一个拖拽的效果 拉到导航栏中可以搜索的那个捕获ta(保证可获取连续拖动的事件对象)
              image_con.setCaptue && image_con.setCaptue();
              //也是为了兼容IE8 window.event(IE8) 它的事件对象属性在window中
              event = event || window.event;
              //获取偏移量 保持鼠标的指针 不动  offsetLeft返回当前元素左上角相对于 HTMLElement.offsetParent节点的左边界偏移的像素值。
              //偏移量 offset
              this.offset_x = event.clientX - image_con.offsetLeft;
              this.offset_y = event.clientY - image_con.offsetTop;
            }
          },
          //当图片开始跟随鼠标指针移动时
          imageMoveStarts(event){
            console.log(event.action,"打印的拖动的action")
            if(this.is_movable){
              let image_con = document.getElementById(this.currentImgId);
              event = event ||window.event;
              //当鼠标移动时 被拖拽元素跟移动
              //获取鼠标的二维坐标(无偏移的)
              this.unbiased_left = event.clientX - this.offset_x;
              this.unbiased_top = event.clientY - this.offset_y;
              //修改图片的位置
              image_con.style.left = this.unbiased_left / 16 + 'rem';
              image_con.style.top = this.unbiased_top / 16 + 'rem';
            }
          },
          //当松开鼠标，图片移动终止
          imageMoveEnds(event){
            debugger
            this.is_movable = false;
          },
          //干掉h5原生事件,防止在拖动时mouse-up不能触发
          cancelNativeH5Event(){
            document.ondragstart = function(ev) {
              ev.preventDefault();
            };
            document.ondragend = function(ev) {
              ev.preventDefault();
            }
          },
        },
        components: {},
        watch: {},
        computed: {
          currentId(){
            return 'segmentationImageViewer'+ this.currentLoad
          },
          currentImgId(){
            return 'imageConId' + this.currentLoad
          },
        },
        mounted() {
          this.cancelNativeH5Event();
        },
        created() {
        },
        beforeDestroy() {
        },

    }
</script>

<style lang="less" scoped>
.segmentation-image-viewer{
  width: 100%;
  height:100%;
  position: absolute;
  left: 0rem;
  top:0rem;
  z-index: 999;
  /*display: flex;
  align-items: center;
  justify-content: center;*/
  overflow: hidden;
  .image-con{
    width: auto;
    height: 100%;
    object-fit:cover;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>