图片拖拽以及放大缩小

图片拖拽以及放大缩小

<template>
  <a-button style="margin-left: 3px" size="small" type="primary" @click="magnifyImg">放大
  </a-button>
  <a-button style="margin-left: 3px" size="small" type="primary" @click="shrinkImg">缩小
  </a-button>
  <div :style="styleObjectWrapper" ref="imgWrapper" class="imgWrapper" @mouseover="onMouseOver">
	<div
	   class="movableItem"
	   :style="movableItemStyle"
	   ref="bigImage"
	   @mousedown="drag($event,1)"
	   @contextmenu.prevent
	 >
	   <img
	     :src="src"
	     ref="mainImg"
	     oncontextmenu="return false;"
	     onselectstart="return false;"
	     draggable="false"
	     alt
	     :style="{
	       width:''+imgScaleWidth+'px',
	       height:''+imgScaleHeight+'px',
	     }"
	   />
	 </div>
   </div
</template>
<script>
  export default {
    data () {
      return {
        positionX: 0,//图片横向移动距离
        positionY: 0,//图片纵向移动距离
        imgWidth: 0,//图片宽度
	    imgHeight: 0,//图片高度
	    imgScaleWidth: 0,//图片缩放后的宽度
	    imgScaleHeight: 0,//图片缩放后的高度
	    multiples: 1,//图片缩放倍数
        src: '',//图片路径
        //图片包裹元素
        movableItemStyle: {
          position: 'absolute',
          top: '0px',
          left: '0px'
        },
        //图片外层的div，图片不超出div范围
        styleObjectWrapper: {
          overflow: 'hidden',
          position: 'relative',
          backgroundColor: '#F2F2F2',
          width: '100%',
          height: document.body.clientHeight - 300 + 'px'
        }
      }
    },
    methods: {
      //放大
      magnifyImg () {
        if (this.multiples >= 2) {
          return
        }

        this.multiples += 0.2
        this.imgScaleWidth = this.imgWidth * this.multiples
        this.imgScaleHeight = this.imgHeight * this.multiples

        this.$refs.bigImage.style.top = (this.positionY * this.multiples) + 'px'
        this.$refs.bigImage.style.left = (this.positionX * this.multiples) + 'px'
      },
      // 缩小
      shrinkImg () {
        if (this.multiples <= 0.3) {
          return
        }

        this.multiples -= 0.2

        this.imgScaleWidth = this.imgWidth * this.multiples
        this.imgScaleHeight = this.imgHeight * this.multiples

        this.$refs.bigImage.style.top = (this.positionY * this.multiples) + 'px'
        this.$refs.bigImage.style.left = (this.positionX * this.multiples) + 'px'
      },
      //获取图片路径,方法中调用
      downloadByBlob (url) {
        const vm = this
        const image = new Image()
        image.src = url
        image.onload = () => {
         //图片原本的宽高
          vm.imgWidth = image.width
          vm.imgHeight = image.height
          //图片使用宽高，用于缩放
          vm.imgScaleWidth = image.width
          vm.imgScaleHeight = image.height
          //图片src
          vm.src = url
        }
      },
      drag (ev) {
        //   console.log(ev / 0);
        var _this = this
        console.log('点击图片')
        var nn6 = document.getElementById && !document.all
        var isdrag = false
        var y, x
        var nTY, nTX
        var oDragObj
        function moveMouse (e) {
          if (isdrag) {
            const eY = nn6 ? e.clientY : event.clientY
            const eX = nn6 ? e.clientX : event.clientX

            oDragObj.style.top = (nTY + eY - y) + 'px'
            oDragObj.style.left = (nTX + eX - x) + 'px'

            _this.positionY = (nTY + eY - y) / _this.multiples
            _this.positionX = (nTX + eX - x) / _this.multiples
            
            return false
          }
        }
        function initDrag (e) {
          console.log('点击图片initDrag')
          var oDragHandle = nn6 ? e.target : event.srcElement
          // var oImg = _this.$refs.bigImage.childNodes[0]
          var topElement = 'HTML'
          while (
            oDragHandle.tagName !== topElement &&
            oDragHandle.className !== 'movableItem'
          ) {
            oDragHandle = nn6
              ? oDragHandle.parentNode
              : oDragHandle.parentElement
          }
          if (oDragHandle.className === 'movableItem') {
            isdrag = true
            oDragObj = oDragHandle
            const width = _this.$refs.imgWrapper.offsetWidth
            const height = _this.$refs.imgWrapper.offsetHeight
            // 这里判断第一次获取不到style 样式 默认为 居中50%
            if (oDragObj.style.top === '') {
              nTY = parseInt(50 * height / 100 + 0)
              nTX = parseInt(50 * width / 100 + 0)
            } else {
              nTY = parseInt(oDragObj.style.top)
              nTX = parseInt(oDragObj.style.left)
            }
            y = nn6 ? e.clientY : event.clientY
            x = nn6 ? e.clientX : event.clientX
            oDragObj.style.cursor = 'move'
            document.onmousemove = moveMouse
            return false
          }
        }
        document.onmousemove = initDrag
        // document.onmouseup = new Function('isdrag=false')
        document.onmouseup = function (e) {
          isdrag = false
          document.onmousemove = null
          document.onmouseup = null
          var oDragHandle = nn6 ? e.target : event.srcElement
          var topElement = 'HTML'
          while (
            oDragHandle.tagName !== topElement &&
            oDragHandle.className !== 'movableItem'
          ) {
            oDragHandle = nn6
              ? oDragHandle.parentNode
              : oDragHandle.parentElement
          }
          if (oDragHandle.className === 'movableItem') {
            oDragObj = oDragHandle
            oDragObj.style.cursor = 'Default'
          }
        }
        ev = event || window.event
        // 取消事件冒泡行为
        window.event ? (window.event.cancelBubble = true) : ev.stopPropagation()
      },
    }
  }
</script>