模仿美图秀秀对图片进行各种扩图，超出最大宽时进行等比缩小

美图秀秀海报ai扩图：https://account.meitu.com/#!/login/sms

const enlargeSceneMatchRef = ref<any>(null)
import EnlargeSceneMatch from '@/views/index/EnlargeSceneMatch.vue' //一键扩景展示区

EnlargeSceneMatch.vue
<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, nextTick, watch, getCurrentInstance } from 'vue'
import { useEventBus } from '@/hooks/event/useEventBus'
import { ElMessage } from 'element-plus'
const { emit, on } = useEventBus()
const boxRef = ref<HTMLElement>()
const leaferViewRef = ref<HTMLElement>()
let { ctx: that, proxy } = getCurrentInstance()
import { throttle, debounce } from 'lodash'
const state = reactive({
btnStatus: 1,
imgInfo: {} as any, //图片信息
oldimgInfo: {} as any,
boxW: 0, //容器宽度
boxH: 0, //容器高度
imgW: 1080, //图片宽度
imgH: 607.5, //图片高度
oldimgW: 0, // 上一次图片宽度
oldimgH: 0, //

initimgW: 0, //第一次img宽高
initimgH: 0,
initimgtop: 0,
initimgleft: 0,
initboxW: 0,
initboxH: 0,

imgWHRatio: 0, //图片宽高比
scale: '', //图片比例
minw: 0,
minh: 0,
oldInpimgW: 0, //原输入框宽高
oldInpimgH: 0,
oldboxW: 0, //原扩图宽高
oldboxH: 0,
initoldboxW: 0, //第一次加载最大比例
initoldboxH: 0,
initRatioW: 1, //div宽与输入框宽对应比率
initRatioW2: 1,
initRatioH: 1,
initRatioH2: 1,

//记录当前比例模式
proportionValue: '自由模式',
aspectRatios: {

'1:1': 1 / 1,
'16:9': 16 / 9,
'9:16': 9 / 16,
'3:4': 3 / 4,
'4:3': 4 / 3

// 用于记录当前是否为自由扩展中的自定义功能
isCustom: false,

// 自定义功能参数

imgtop: 0,
oldimgtop: 0,
imgleft: 0,
oldimgleft: 0,
imgright: 0,
imgdown: 0,

levelX: 0,
verticalY: 0,
loading: false,
isDragging: false,
topDrag: 0,
leftDrag: 0,
oldtopDrag: 0,
oldleftDrag: 0,
initialX: 0,
initialY: 0,

isDragging2: false,
isDragging3: false,
startY: 0, // 开始拖动时的Y坐标
startX: 0, // 开始拖动时的Y坐标
startHeight: 0, // 开始拖动时的高度
startWidth: 0, // 开始拖动时的宽度
dragDirection: '', // 拖动方向，这里虽然只处理上边框，但可以扩展

isDraggingImg: false,
initialXImg: 0,
initialYImg: 0,
selects: '',
dragType: '', //区分刚刚是移动还是拖动 move:整体移动 move2:四边拖动

topreality: 0,
leftreality: 0,
rightreality: 0,
downreality: 0,
maxRedBorder: false,
minRedBorder: false,

boxoffsetWidth: 1386,
boxoffsetHeight: 689
})

watch(
() => state.maxRedBorder,
(n, o) => {

if (n && n != o) {
  ElMessage.error('已是最大分辨率,无法扩大')
}

}
)
watch(
() => state.minRedBorder,
(n, o) => {

if (n && n != o) {
  ElMessage.error('到达最小边界了')
}

}
)
//图片大小及位置信息
const getImgInfo = () => {
return {

boxW: state.boxW,
boxH: state.boxH,
imgW: state.imgW,
imgH: state.imgH,
top: state.imgtop,
left: state.imgleft

}
}
const imgDetail = () => {
state.imgright = Math.floor(state.boxW - state.imgW - state.imgleft)
state.imgdown = Math.floor(state.boxH - state.imgH - state.imgtop)
// console.log('右边距和下边距', state.imgright, state.imgdown)
}
const borderCoincide = () => {
let ratio = state.boxW / state.oldInpimgW
let ratio2 = state.boxH / state.oldInpimgH

let left = Math.ceil(state.imgleft / ratio)
let top = Math.ceil(state.imgtop / ratio2)

let imgDown = state.boxH - state.imgtop - state.imgH
let down = Math.ceil(imgDown / ratio2)

let imgRight = state.boxW - state.imgleft - state.imgW
let right = Math.ceil(imgRight / ratio)
let dragNum = 0
if (down <= dragNum && left <= dragNum && right <= dragNum && top <= dragNum) {

return true

} else {

return false

}
}
//给自由模式立即生成入参的参数
const getTBLR = (fn) => {
// console.log('输入框宽高', state.oldInpimgW, state.oldInpimgH)
let ratio = state.boxW / state.oldInpimgW
let ratio2 = state.boxH / state.oldInpimgH

let left = Math.ceil(state.imgleft / ratio)
let top = Math.ceil(state.imgtop / ratio2)

let imgDown = state.boxH - state.imgtop - state.imgH
let down = Math.ceil(imgDown / ratio2)

let imgRight = state.boxW - state.imgleft - state.imgW
let right = Math.ceil(imgRight / ratio)

let width = Math.ceil(state.imgW / ratio)
let height = Math.ceil(state.imgH / ratio2)
let data = {

top: Math.ceil(top),
down: Math.ceil(down),
left: Math.ceil(left),
right: Math.ceil(right),
width: Math.ceil(width), //缩放后的图宽高
height: Math.ceil(height),
flag: false

}
return data
}
// 获取图片信息
const imgInfo = (imgInfo: any) => {
state.imgInfo = imgInfo
state.oldimgInfo = JSON.parse(JSON.stringify(imgInfo))
state.proportionValue = imgInfo.scale
ratioMode(state.proportionValue)
}

const emits = defineEmits(['getOrientation'])

// 计算让物体居中的位置
const getCenter = () => {
state.leftDrag = Math.ceil((state.boxoffsetWidth - state.boxW) / 2) //水平
state.topDrag = Math.ceil((state.boxoffsetHeight - state.boxH) / 2) //垂直
state.oldtopDrag = state.topDrag
state.oldleftDrag = state.leftDrag
}
/**

@param proportionValue 比例值
*/

// 获取比例模式和值
const ratioMode = (proportionValue?: any) => {
state.btnStatus = 1
state.maxRedBorder = false
state.minRedBorder = false
state.proportionValue = proportionValue
if (proportionValue === '自由模式' || proportionValue === '原始比例') {

if (Object.keys(state.imgInfo).length === 0) return
scaleShowImg('100')

} else {

if (Object.keys(state.imgInfo).length === 0) return
scaleShowImg(proportionValue)
// libertyScaleShowImg(proportionValue)

}
getCenter()
}
// -----------start 扩图整体本身拖动-------------
const dragStart = (event) => {
// console.log('整体拖动')
//event.preventDefault()
// event.stopPropagation()
state.isDragging = true
state.initialX = event.clientX - state.leftDrag
state.initialY = event.clientY - state.topDrag
}
const dragEnd = (event) => {
// event.stopPropagation()
state.isDragging = false
}
const dragMove = (event) => {
//event.preventDefault()
// event.stopPropagation()//添加冒泡会阻止四边拖动的mouseup触发
if (state.isDragging) {

state.dragType = 'move'
let left = event.clientX - state.initialX
let top = event.clientY - state.initialY
if (left < 0) {
  left = 0
}
if (top < 0) {
  top = 0
}
let maxW = state.boxoffsetWidth - state.boxW
if (left > maxW) {
  left = maxW
}
let maxH = state.boxoffsetHeight - state.boxH - 2
if (top > maxH) {
  top = maxH
}
state.leftDrag = left
state.topDrag = top
state.oldtopDrag = state.topDrag
state.oldleftDrag = state.leftDrag

}
}
// -----------eng 扩图整体本身拖动-------------
// -----------start扩图四边拖动-------------
const dragStart2 = (event, type) => {
if (state.btnStatus == 1) {

//event.preventDefault() //阻止拖动到最边默认选中其他元素
event.stopPropagation()
state.isDragging2 = true
console.log('isDragging2', state.isDragging2)
if (type == 'top' || type == 'bottom') {
  state.startY = event.clientY
  state.startHeight = state.boxH
  state.dragDirection = type
} else if (type == 'left' || type == 'right') {
  // console.log('拖到图片左侧不能拖了', state.oldimgleft)
  state.startX = event.clientX
  state.startWidth = state.boxW
  state.dragDirection = type
}
imgDetail()
document.addEventListener('mousemove', onDragging2)
document.addEventListener('mouseup', dragEnd2)
pointTip.style.display = 'block'
// console.log('拖动状态down', state.oldimgleft, state.oldleftDrag)

}
}
const dragEnd2 = (event) => {
if (state.btnStatus == 1) {

console.log('四边拖动结束只有1才进来')
state.isDragging2 = false
state.isDragging = false

//event.preventDefault()
event.stopPropagation()
document.removeEventListener('mousemove', onDragging2)
document.removeEventListener('mouseup', dragEnd2)
state.oldtopDrag = state.topDrag
state.oldleftDrag = state.leftDrag

state.oldimgtop = state.imgtop
state.oldimgleft = state.imgleft

if (state.dragType == 'move2') {
  // console.log('----------dragEnd2---------')
  let condition = true
  let bordermaxBoxW = state.boxoffsetWidth - 150 * 2
  let bordermaxBoxH = state.boxoffsetHeight - 60 * 2
  let rate
  let rate1 = 1
  let rate2 = 1
  if (state.scale == '100') {
    rate1 = state.boxW
    rate2 = state.boxH
  } else {
    rate = state.scale.split(':') //9:16
    rate1 = Number(rate[0])
    rate2 = Number(rate[1])
  }
  if (bordermaxBoxW / rate1 < bordermaxBoxH / rate2) {
    condition = true
    //state.dragDirection == 'left' || state.dragDirection == 'right
  } else {
    condition = false
    //state.dragDirection == 'top' || state.dragDirection == 'bottom'
  }
  if (condition) {
    let maxBox = state.boxoffsetWidth - 150 * 2 //最大就这么宽1186 超了就缩
    let scale = 1
    let ratio = state.boxW / state.oldInpimgW
    let ratio2 = state.boxH / state.oldInpimgH

    let left = Math.ceil(state.imgleft / ratio)
    let top = Math.ceil(state.imgtop / ratio2)

    let imgDown = state.boxH - state.imgtop - state.imgH
    let down = Math.ceil(imgDown / ratio2)

    let imgRight = state.boxW - state.imgleft - state.imgW
    let right = Math.ceil(imgRight / ratio)

    //初始div高与输入框高对应比率  *  现在输入框宽 = 现在div高
    let divW = state.oldInpimgW * state.initRatioW
    if (divW > maxBox) {
      scale = divW / maxBox

      state.oldimgW = state.imgW = state.initimgW / scale
      state.oldimgH = state.imgH = state.initimgH / scale

      state.oldimgtop = state.imgtop =
        (state.imgtop * state.initRatioW * (state.oldInpimgH / state.boxH)) / scale
      state.oldimgleft = state.imgleft =
        (state.imgleft * state.initRatioW * (state.oldInpimgW / state.boxW)) / scale

      state.boxH = (state.oldInpimgH * state.initRatioH) / scale
      //debugger
      state.boxW = maxBox
    } else {
      state.boxH = state.oldInpimgH * state.initRatioH
      //debugger
      state.boxW = divW
      state.oldimgW = state.imgW = state.minw * state.initRatioW
      state.oldimgH = state.imgH = state.minh * state.initRatioH
      state.oldimgtop = state.imgtop = top * state.initRatioW
      state.oldimgleft = state.imgleft = left * state.initRatioW
    }
  } else {
    let maxBox = state.boxoffsetHeight - 60 * 2 //最大就这么宽489 超了就缩
    let scale = 1

    let ratio = state.boxW / state.oldInpimgW
    let ratio2 = state.boxH / state.oldInpimgH

    let left = Math.ceil(state.imgleft / ratio)
    let top = Math.ceil(state.imgtop / ratio2)

    let imgDown = state.boxH - state.imgtop - state.imgH
    let down = Math.ceil(imgDown / ratio2)

    let imgRight = state.boxW - state.imgleft - state.imgW
    let right = Math.ceil(imgRight / ratio)

    //初始div高与输入框高对应比率  *  现在输入框宽 = 现在div高
    let divh = state.oldInpimgH * state.initRatioH
    if (divh > maxBox) {
      scale = divh / maxBox

      state.oldimgW = state.imgW = state.initimgW / scale
      state.oldimgH = state.imgH = state.initimgH / scale

      // state.oldimgtop = state.imgtop = state.imgtop / scale
      // state.oldimgleft = state.imgleft = state.imgleft / scale
      state.oldimgtop = state.imgtop =
        (state.imgtop * state.initRatioW * (state.oldInpimgH / state.boxH)) / scale
      state.oldimgleft = state.imgleft =
        (state.imgleft * state.initRatioW * (state.oldInpimgW / state.boxW)) / scale

      state.boxH = maxBox
      //debugger
      state.boxW = (state.oldInpimgW * state.initRatioW) / scale
    } else {
      state.boxH = divh
      //debugger
      state.boxW = state.oldInpimgW * state.initRatioW
      state.oldimgW = state.imgW = state.minw * state.initRatioW
      state.oldimgH = state.imgH = state.minh * state.initRatioH
      state.oldimgtop = state.imgtop = top * state.initRatioW
      state.oldimgleft = state.imgleft = left * state.initRatioW
    }
  }
  getCenter()
  state.initRatioW2 = state.boxW / state.oldInpimgW //div宽与输入框宽对应比率
  state.initRatioH2 = state.boxH / state.oldInpimgH //div宽与输入框宽对应比率

  state.dragType = ''
}
pointTip.style.display = 'none'
pointTip.style.left = `-300px`
pointTip.style.top = `-300px`

}
// console.log('四边拖动状态End', state.oldimgleft, state.oldleftDrag)
}
const onDragging2 = (event) => {
//event.preventDefault()
if (state.btnStatus == 1) {

if (state.isDragging2) {
  event.stopPropagation()
  state.dragType = 'move2'
  if (state.dragDirection == 'top') {
    const deltaY = event.clientY - state.startY
    //往上拖到顶部不能拖了
    if (state.oldtopDrag + deltaY <= 0) {
      // console.log('不能拖了')
      return
    }

    let setH = state.startHeight - deltaY

    let inpH = setH / state.initRatioH2 //输入框高
    if (inpH > 2048) {
      console.log('真实比', inpH, setH, state.initRatioH2)
      if (state.oldInpimgH + 10 > 2048) {
        state.maxRedBorder = true
        state.oldInpimgH = 2048
        emit('setHImgSize', 2048)
      }
      return
    }
    state.maxRedBorder = false

    if (state.oldimgtop - deltaY <= 0) {
      if (borderCoincide()) {
        state.minRedBorder = true
      }
      state.boxH = Math.floor(state.imgH + state.imgdown)
      state.oldInpimgH = state.boxH / state.initRatioH2 //输入框高
      state.imgtop = 0
      state.topDrag = state.oldtopDrag + state.oldimgtop
      console.log('top拖到图片不能拖了', state.boxH)
      return
    }
    state.minRedBorder = false

    state.oldInpimgH = inpH
    emit('setHImgSize', inpH)

    state.imgtop = state.oldimgtop - deltaY
    state.topDrag = state.oldtopDrag + deltaY
    state.boxH = Math.max(55, setH)
  } else if (state.dragDirection == 'bottom') {
    const deltaY = event.clientY - state.startY
    let setH = state.startHeight + deltaY

    let inpH = setH / state.initRatioH2 //输入框高
    if (inpH > 2048) {
      // console.log('真实比', setH)
      if (state.oldInpimgH + 10 > 2048) {
        state.maxRedBorder = true
        state.oldInpimgH = 2048
        emit('setHImgSize', 2048)
      }
      return
    }
    state.maxRedBorder = false

    if (setH < state.imgtop + state.imgH) {
      //拖到图片处停止
      if (borderCoincide()) {
        state.minRedBorder = true
      }
      state.boxH = state.imgH + state.imgtop
      state.oldInpimgH = state.boxH / state.initRatioH2
      return
    }
    state.minRedBorder = false
    // console.log('setW', setH, state.boxoffsetHeight)
    if (setH + state.topDrag > state.boxoffsetHeight - 2) {
      //不能大于底部边最外边容器
      return
    }
    state.oldInpimgH = inpH
    emit('setHImgSize', inpH)

    state.boxH = Math.max(55, setH)
  } else if (state.dragDirection == 'left') {
    // 拖最左边停
    const deltaX = event.clientX - state.startX
    if (state.oldleftDrag + deltaX < 0) {
      // console.log('拖到容器左侧不能拖了')
      return
    }
    let setW = state.startWidth - deltaX

    if (Math.ceil(state.oldimgleft) - deltaX < 0) {
      //拖到图片处停止
      if (borderCoincide()) {
        state.minRedBorder = true
      }
      state.boxW = Math.floor(state.imgW + state.imgright)
      state.imgleft = 0
      state.oldInpimgW = state.boxW / state.initRatioW2 //输入框宽
      state.leftDrag = state.oldleftDrag + state.oldimgleft
      // console.log('left拖到图片不能拖了', state.boxW)
      return
    }
    state.minRedBorder = false

    let inpW = setW / state.initRatioW2 //输入框宽

    if (inpW > 2048) {
      // console.log('真实比', setW, state.initRatioW2, state.startWidth, deltaX, inpW)
      if (state.oldInpimgW + 10 > 2048) {
        state.maxRedBorder = true
        state.oldInpimgW = 2048
        emit('setWImgSize', 2048)
      }
      return
    }
    state.maxRedBorder = false
    state.oldInpimgW = inpW
    emit('setWImgSize', inpW)

    state.imgleft = state.oldimgleft - deltaX
    state.leftDrag = state.oldleftDrag + deltaX
    // console.log('拖到容器', state.leftDrag, state.oldleftDrag)

    state.boxW = Math.max(55, setW)
  } else if (state.dragDirection == 'right') {
    const deltaX = event.clientX - state.startX
    let setW = state.startWidth + deltaX

    let inpW = setW / state.initRatioW2 //输入框宽
    if (inpW > 2048) {
      // console.log('真实比', setW)
      if (state.oldInpimgW + 10 > 2048) {
        state.maxRedBorder = true
        state.oldInpimgW = 2048
        emit('setWImgSize', 2048)
      }
      return
    }
    state.maxRedBorder = false

    //右边-拖到图片处停止
    if (setW < state.imgleft + state.imgW) {
      if (borderCoincide()) {
        state.minRedBorder = true
      }
      state.boxW = Math.max(state.imgW + state.imgleft) + 1
      state.oldInpimgW = state.boxW / state.initRatioW2
      // console.log('右边-拖到图片右侧处停止', deltaX, state.boxW)
      that.$forceUpdate()
      return
    }
    state.minRedBorder = false

    if (setW + state.leftDrag > state.boxoffsetWidth) {
      //不能大于右边最外边容器
      return
    }

    state.oldInpimgW = inpW
    emit('setWImgSize', inpW)

    state.boxW = Math.max(55, setW)
    // console.log('右边-拖到图片右侧处停止2', state.imgW, state.imgleft, state.boxW)
  }
  updateMousePosition(event)
}

}
}
// -----------end扩图四边拖动-------------

// -----------start扩图四角拖动-------------
const dragStart3 = (event, type) => {
if (state.btnStatus == 1) {

//event.preventDefault()
event.stopPropagation()
state.isDragging3 = true
// console.log(type)
state.startY = event.clientY
state.startHeight = state.boxH
state.dragDirection = type
state.startX = event.clientX
state.startWidth = state.boxW
document.addEventListener('mousemove', onDragging3)
document.addEventListener('mouseup', dragEnd3)
pointTip.style.display = 'block'

}
}
const dragEnd3 = (event) => {
if (state.btnStatus == 1) {

state.selects = ''
state.isDragging3 = false
state.isDragging = false
// console.log('拖动状态End', state.isDragging3)
//event.preventDefault()
event.stopPropagation()
document.removeEventListener('mousemove', onDragging3)
document.removeEventListener('mouseup', dragEnd3)
state.oldtopDrag = state.topDrag
state.oldleftDrag = state.leftDrag

state.oldimgtop = state.imgtop
state.oldimgleft = state.imgleft
if (state.dragType == 'move2') {
  console.log('四个角拖动缩小')
  let condition = true
  let bordermaxBoxW = state.boxoffsetWidth - 150 * 2
  let bordermaxBoxH = state.boxoffsetHeight - 60 * 2
  let rate
  let rate1 = 1
  let rate2 = 1
  if (state.scale == '100') {
    rate1 = state.boxW
    rate2 = state.boxH
  } else {
    rate = state.scale.split(':') //9:16
    rate1 = Number(rate[0])
    rate2 = Number(rate[1])
  }
  if (bordermaxBoxW / rate1 < bordermaxBoxH / rate2) {
    condition = true
    //state.dragDirection == 'left' || state.dragDirection == 'right
  } else {
    condition = false
    //state.dragDirection == 'top' || state.dragDirection == 'bottom'
  }
  if (condition) {
    let maxBox = state.boxoffsetWidth - 150 * 2 //最大就这么宽1186 超了就缩
    let scale = 1
    let ratio = state.boxW / state.oldInpimgW
    let ratio2 = state.boxH / state.oldInpimgH

    let left = Math.ceil(state.imgleft / ratio)
    let top = Math.ceil(state.imgtop / ratio2)

    let imgDown = state.boxH - state.imgtop - state.imgH
    let down = Math.ceil(imgDown / ratio2)

    let imgRight = state.boxW - state.imgleft - state.imgW
    let right = Math.ceil(imgRight / ratio)

    //初始div高与输入框高对应比率  *  现在输入框宽 = 现在div高
    let divW = state.oldInpimgW * state.initRatioW
    if (divW > maxBox) {
      scale = divW / maxBox

      state.oldimgW = state.imgW = state.initimgW / scale
      state.oldimgH = state.imgH = state.initimgH / scale

      state.oldimgtop = state.imgtop =
        (state.imgtop * state.initRatioW * (state.oldInpimgH / state.boxH)) / scale
      state.oldimgleft = state.imgleft =
        (state.imgleft * state.initRatioW * (state.oldInpimgW / state.boxW)) / scale

      state.boxH = (state.oldInpimgH * state.initRatioH) / scale
      //debugger
      state.boxW = maxBox
    } else {
      state.boxH = state.oldInpimgH * state.initRatioH
      //debugger
      state.boxW = divW
      state.oldimgW = state.imgW = state.minw * state.initRatioW
      state.oldimgH = state.imgH = state.minh * state.initRatioH
      state.oldimgtop = state.imgtop = top * state.initRatioW
      state.oldimgleft = state.imgleft = left * state.initRatioW
    }
  } else {
    let maxBox = state.boxoffsetHeight - 60 * 2 //最大就这么宽489 超了就缩
    let scale = 1

    let ratio = state.boxW / state.oldInpimgW
    let ratio2 = state.boxH / state.oldInpimgH

    let left = Math.ceil(state.imgleft / ratio)
    let top = Math.ceil(state.imgtop / ratio2)

    let imgDown = state.boxH - state.imgtop - state.imgH
    let down = Math.ceil(imgDown / ratio2)

    let imgRight = state.boxW - state.imgleft - state.imgW
    let right = Math.ceil(imgRight / ratio)

    //初始div高与输入框高对应比率  *  现在输入框宽 = 现在div高
    let divh = state.oldInpimgH * state.initRatioH
    if (divh > maxBox) {
      scale = divh / maxBox

      state.oldimgW = state.imgW = state.initimgW / scale
      state.oldimgH = state.imgH = state.initimgH / scale

      state.oldimgtop = state.imgtop =
        (state.imgtop * state.initRatioW * (state.oldInpimgH / state.boxH)) / scale
      state.oldimgleft = state.imgleft =
        (state.imgleft * state.initRatioW * (state.oldInpimgW / state.boxW)) / scale

      state.boxH = maxBox
      //debugger
      state.boxW = (state.oldInpimgW * state.initRatioW) / scale
    } else {
      state.boxH = divh
      //debugger
      state.boxW = state.oldInpimgW * state.initRatioW
      state.oldimgW = state.imgW = state.minw * state.initRatioW
      state.oldimgH = state.imgH = state.minh * state.initRatioH
      state.oldimgtop = state.imgtop = top * state.initRatioW
      state.oldimgleft = state.imgleft = left * state.initRatioW
    }
  }
  getCenter()
  console.log('修改左侧输入框值4')
  state.initRatioW2 = state.boxW / state.oldInpimgW //div宽与输入框宽对应比率
  state.initRatioH2 = state.boxH / state.oldInpimgH //div宽与输入框宽对应比率

  state.dragType = ''
}
pointTip.style.display = 'none'
pointTip.style.left = `-300px`
pointTip.style.top = `-300px`

}
}
const onDragging3 = (event) => {
//event.preventDefault()
if (state.btnStatus == 1) {

event.stopPropagation()
if (state.isDragging3) {
  state.dragType = 'move2'
  if (state.dragDirection == 'top') {
    let deltaX = event.clientX - state.startX
    let deltaY = event.clientY - state.startY
    //往上拖到顶部不能拖了
    // console.log(state.selects)

    let ratio = 0 //缩放比例
    if ((Math.abs(deltaX) > Math.abs(deltaY) && state.selects == '') || state.selects == '1') {
      if (state.oldleftDrag + deltaX < 0) {
        //移动左外框
        return
      }

      if (state.oldimgleft - deltaX <= 0) {
        // return
        //  console.log('从左往右拖到图片左侧不能拖了')
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        deltaX = state.oldimgleft
        return
      }
      if (Math.abs(deltaX) > 5) {
        state.selects = '1'
      }
      ratio = deltaX / state.startWidth
      let num = state.startHeight * ratio //高移动距离

      if (state.oldimgtop - num < 0) {
        //拖动时图片顶部缩小不能拖了
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }
      if (state.oldtopDrag + num < 0) {
        //拖动时不能超过外框顶部
        return
      }
      let setW = state.startWidth - deltaX

      let inpH = (state.startHeight - num) / state.initRatioH2
      let inpW = setW / state.initRatioH2
      if (inpH > 2048 || inpW > 2048) {
        debugger
        if (inpH > 2048) {
          inpH = 2048
          state.oldInpimgH = 2048
          emit('setHImgSize', 2048)
        }
        if (inpW > 2048) {
          inpW = 2048
          state.oldInpimgW = 2048
          emit('setWImgSize', 2048)
        }
        if (state.oldInpimgH == 2048 && state.oldInpimgW == 2048) {
          state.maxRedBorder = true
        }
        return
      }
      state.maxRedBorder = false

      state.minRedBorder = false

      state.oldInpimgH = inpH
      emit('setHImgSize', inpH)

      state.oldInpimgW = inpW
      emit('setWImgSize', inpW)

      state.imgleft = state.oldimgleft - deltaX
      state.leftDrag = state.oldleftDrag + deltaX
      state.boxW = Math.max(55, setW)

      state.boxH = state.startHeight - num
      state.imgtop = state.oldimgtop - num
      state.topDrag = state.oldtopDrag + num
      console.log('x一直过来')
    } else {
      if (Math.abs(deltaY) > 5) {
        state.selects = '2'
      }
      if (state.oldimgtop - deltaY < 0) {
        // console.log('从上往下拖到图片不能拖了')
        deltaY = state.oldimgtop
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }
      if (state.oldtopDrag + deltaY < 0) {
        // 拖到外框不能拖了
        return
      }
      ratio = deltaY / state.startHeight
      let num = state.startWidth * ratio //宽移动距离
      if (state.oldimgleft - num < 0) {
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        // console.log('从上往下拖左侧到图片不能拖了')
        return
      }
      if (state.oldleftDrag + num < 0) {
        // console.log('从上往上拖左侧到外框不能拖了')
        return
      }
      let setH = state.startHeight - deltaY

      let inpH = setH / state.initRatioH2
      let inpW = (state.startWidth - num) / state.initRatioH2
      if (inpH > 2048 || inpW > 2048) {
        if (inpH > 2048) {
          inpH = 2048
          state.oldInpimgH = 2048
          emit('setHImgSize', 2048)
        }
        if (inpW > 2048) {
          inpW = 2048
          state.oldInpimgW = 2048
          emit('setWImgSize', 2048)
        }
        if (state.oldInpimgH == 2048 && state.oldInpimgW == 2048) {
          state.maxRedBorder = true
        }
        return
      }
      state.maxRedBorder = false

      state.minRedBorder = false

      state.oldInpimgH = inpH
      emit('setHImgSize', inpH)

      state.oldInpimgW = inpW
      emit('setWImgSize', inpW)

      state.imgtop = state.oldimgtop - deltaY
      state.topDrag = state.oldtopDrag + deltaY
      state.boxH = Math.max(55, setH)

      state.boxW = state.startWidth - num
      state.imgleft = state.oldimgleft - num
      state.leftDrag = state.oldleftDrag + num
      console.log('y一直过来')
    }
  } else if (state.dragDirection == 'bottom') {
    //右下

    let deltaX = event.clientX - state.startX

    let deltaY = event.clientY - state.startY

    let ratio = 0 //缩放比例
    if ((Math.abs(deltaX) > Math.abs(deltaY) && state.selects == '') || state.selects == '1') {
      //右边-拖到图片处停止
      if (state.startWidth + deltaX < state.imgleft + state.imgW) {
        // console.log("拖不动了")
        deltaX = (state.startWidth - state.imgleft - state.imgW) * -1
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }
      let setW = state.startWidth + deltaX
      if (setW + state.leftDrag > state.boxoffsetWidth) {
        //不能大于右边最外边容器
        return
      }

      ratio = deltaX / state.startWidth
      let num = state.startHeight * ratio //高移动距离
      if (state.oldimgtop + state.imgH > state.startHeight + num) {
        // console.log('拖到图片不能拖了')
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }
      if (state.oldtopDrag + state.startHeight + num > state.boxoffsetHeight) {
        return
      }

      if (Math.abs(deltaX) > 5) {
        state.selects = '1'
      }

      let inpH = (state.startHeight + num) / state.initRatioH2
      let inpW = setW / state.initRatioH2
      if (inpH > 2048 || inpW > 2048) {
        debugger
        if (inpH > 2048) {
          inpH = 2048
          state.oldInpimgH = 2048
          emit('setHImgSize', 2048)
        }
        if (inpW > 2048) {
          inpW = 2048
          state.oldInpimgW = 2048
          emit('setWImgSize', 2048)
        }
        if (state.oldInpimgH == 2048 && state.oldInpimgW == 2048) {
          state.maxRedBorder = true
        }
        return
      }
      state.maxRedBorder = false

      state.minRedBorder = false
      state.oldInpimgH = inpH
      emit('setHImgSize', inpH)

      state.oldInpimgW = inpW
      emit('setWImgSize', inpW)

      state.boxW = Math.max(55, setW)
      state.boxH = state.startHeight + num

      // state.imgtop = state.oldimgtop + num
      // state.topDrag = state.oldtopDrag - num;
    } else {
      //右边-拖到图片处停止
      if (state.oldimgtop + state.imgH > state.startHeight + deltaY) {
        // console.log("拖不动了")
        // return
        deltaY = state.oldimgtop + state.imgH - state.startHeight
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }
      if (state.oldtopDrag + state.startHeight + deltaY > state.boxoffsetHeight) {
        return
      }
      let setH = state.startHeight + deltaY
      ratio = deltaY / state.startHeight
      let num = state.startWidth * ratio //高移动距离
      if (state.oldimgleft + state.imgW > state.boxW + num) {
        // console.log('拖到图片不能拖了')
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }
      if (state.leftDrag + state.oldboxW + num > state.boxoffsetWidth) {
        //不能大于右边最外边容器
        return
      }

      if (Math.abs(deltaY) > 5) {
        state.selects = '2'
      }

      let inpH = setH / state.initRatioH2
      let inpW = (state.startWidth + num) / state.initRatioH2
      if (inpH > 2048 || inpW > 2048) {
        debugger
        if (inpH > 2048) {
          inpH = 2048
          state.oldInpimgH = 2048
          emit('setHImgSize', 2048)
        }
        if (inpW > 2048) {
          inpW = 2048
          state.oldInpimgW = 2048
          emit('setWImgSize', 2048)
        }
        if (state.oldInpimgH == 2048 && state.oldInpimgW == 2048) {
          state.maxRedBorder = true
        }
        return
      }
      state.maxRedBorder = false

      state.minRedBorder = false

      state.oldInpimgH = inpH
      emit('setHImgSize', inpH)

      state.oldInpimgW = inpW
      emit('setWImgSize', inpW)

      state.boxH = Math.max(55, setH)
      // state.imgtop = state.oldimgtop - deltaY;
      // state.topDrag = state.oldtopDrag + deltaY

      state.boxW = state.startWidth + num
    }
    // let setH = state.startHeight + deltaY
    // if (setH < state.imgtop + state.imgH) {
    //   //拖到图片处停止
    //   return
    // }
    // // console.log('setW', setH, state.boxoffsetHeight)
    // if (setH + state.topDrag > state.boxoffsetHeight - 2) {
    //   //不能大于底部边最外边容器
    //   return
    // }
    // state.boxH = Math.max(55, setH)
  } else if (state.dragDirection == 'left') {
    //左下
    // 拖最左边停
    let deltaX = event.clientX - state.startX

    let deltaY = event.clientY - state.startY
    // if (state.oldleftDrag + deltaX < 0) {
    //   return
    // }

    let ratio = 0 //缩放比例
    if ((Math.abs(deltaX) > Math.abs(deltaY) && state.selects == '') || state.selects == '1') {
      if (state.oldimgleft - deltaX < 0) {
        console.log('左下拖到图片不能拖了1')
        // return
        deltaX = state.oldimgleft
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }
      if (Math.abs(deltaX) > 5) {
        state.selects = '1'
      }
      if (state.oldleftDrag + deltaX < 0) {
        // console.log('拖到图片不能拖了2')
        return
      }
      ratio = deltaX / state.startWidth
      let num = state.startHeight * ratio //高移动距离

      if (state.oldtopDrag + state.oldboxH - num > state.boxoffsetHeight) {
        // X轴一定限制底部
        return
      }

      if (state.oldimgtop + state.imgH > state.startHeight - num) {
        // console.log('拖到图片不能拖了2')
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }
      let setW = state.startWidth - deltaX

      let inpH = (state.startHeight - num) / state.initRatioH2
      let inpW = setW / state.initRatioH2
      if (inpH > 2048 || inpW > 2048) {
        debugger
        if (inpH > 2048) {
          inpH = 2048
          state.oldInpimgH = 2048
          emit('setHImgSize', 2048)
        }
        if (inpW > 2048) {
          inpW = 2048
          state.oldInpimgW = 2048
          emit('setWImgSize', 2048)
        }
        if (state.oldInpimgH == 2048 && state.oldInpimgW == 2048) {
          state.maxRedBorder = true
        }
        return
      }
      state.maxRedBorder = false

      state.minRedBorder = false

      state.oldInpimgH = inpH
      emit('setHImgSize', inpH)

      state.oldInpimgW = inpW
      emit('setWImgSize', inpW)

      state.imgleft = state.oldimgleft - deltaX
      state.leftDrag = state.oldleftDrag + deltaX
      state.boxW = Math.max(55, setW)

      state.boxH = state.startHeight - num
      // state.imgtop = state.oldimgtop - num
      // state.topDrag = state.oldtopDrag + num;
    } else {
      if (Math.abs(deltaY) > 5) {
        state.selects = '2'
      }
      if (state.oldimgtop + state.imgH > state.startHeight + deltaY) {
        // console.log('拖到图片不能拖了3')
        // return
        deltaY = state.oldimgtop + state.imgH - state.startHeight
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }
      if (state.oldtopDrag + state.oldboxH + deltaY > state.boxoffsetHeight) {
        // X轴一定限制底部
        return
      }
      ratio = deltaY / state.startHeight
      let num = state.startWidth * ratio //宽移动距离
      if (state.oldleftDrag - num < 0) {
        // console.log('拖到图片不能拖了2')
        return
      }
      // console.log(num)
      if (state.oldimgleft + num < 0) {
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        // console.log('拖到图片不能拖了4')
        return
      }

      let setH = state.startHeight + deltaY
      // state.imgtop = state.oldimgtop + deltaY
      // state.topDrag = state.oldtopDrag - deltaY
      let inpH = setH / state.initRatioH2
      let inpW = (state.startWidth + num) / state.initRatioH2
      if (inpH > 2048 || inpW > 2048) {
        debugger
        if (inpH > 2048) {
          inpH = 2048
          state.oldInpimgH = 2048
          emit('setHImgSize', 2048)
        }
        if (inpW > 2048) {
          inpW = 2048
          state.oldInpimgW = 2048
          emit('setWImgSize', 2048)
        }
        if (state.oldInpimgH == 2048 && state.oldInpimgW == 2048) {
          state.maxRedBorder = true
        }
        return
      }
      state.maxRedBorder = false

      state.minRedBorder = false

      state.oldInpimgH = inpH
      emit('setHImgSize', inpH)

      state.oldInpimgW = inpW
      emit('setWImgSize', inpW)

      state.boxH = Math.max(55, setH)

      state.boxW = state.startWidth + num
      state.imgleft = state.oldimgleft + num
      state.leftDrag = state.oldleftDrag - num
    }
  } else if (state.dragDirection == 'right') {
    //右上
    let deltaX = event.clientX - state.startX

    let deltaY = event.clientY - state.startY

    let ratio = 0 //缩放比例
    if ((Math.abs(deltaX) > Math.abs(deltaY) && state.selects == '') || state.selects == '1') {
      //右边-拖到图片处停止
      if (state.startWidth + deltaX < state.imgleft + state.imgW) {
        // console.log("拖不动了")
        // return
        deltaX = state.imgleft + state.imgW - state.startWidth
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }
      let setW = state.startWidth + deltaX
      if (setW + state.leftDrag > state.boxoffsetWidth) {
        //不能大于右边最外边容器
        return
      }
      if (state.topDrag < 0) {
        //不能大于顶部边最外边容器
        return
      }

      ratio = deltaX / state.startWidth
      let num = state.startHeight * ratio //高移动距离
      if (state.oldimgtop + num < 0) {
        // console.log('拖到图片不能拖了')
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }

      if (Math.abs(deltaX) > 5) {
        state.selects = '1'
      }

      let inpH = (state.startHeight + num) / state.initRatioH2
      let inpW = setW / state.initRatioH2
      if (inpH > 2048 || inpW > 2048) {
        debugger
        if (inpH > 2048) {
          inpH = 2048
          state.oldInpimgH = 2048
          emit('setHImgSize', 2048)
        }
        if (inpW > 2048) {
          inpW = 2048
          state.oldInpimgW = 2048
          emit('setWImgSize', 2048)
        }
        if (state.oldInpimgH == 2048 && state.oldInpimgW == 2048) {
          state.maxRedBorder = true
        }
        return
      }
      state.maxRedBorder = false

      state.minRedBorder = false

      state.oldInpimgH = inpH
      emit('setHImgSize', inpH)

      state.oldInpimgW = inpW
      emit('setWImgSize', inpW)

      state.boxW = Math.max(55, setW)
      state.boxH = state.startHeight + num
      state.imgtop = state.oldimgtop + num
      state.topDrag = state.oldtopDrag - num
    } else {
      // console.log(state.oldimgtop, deltaY)
      //右边-拖到图片处停止
      if (state.oldimgtop - deltaY < 0) {
        // console.log("拖不动了")
        // return
        deltaY = state.oldimgtop
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }

      let setH = state.startHeight - deltaY
      if (state.topDrag < 0) {
        //不能大于右边最高边容器
        return
      }

      ratio = deltaY / state.startHeight
      let num = state.startWidth * ratio //宽移动距离
      if (state.oldimgleft + state.imgW > state.startWidth - num) {
        // console.log('拖到图片不能拖了')
        if (borderCoincide()) {
          state.minRedBorder = true
        }
        return
      }

      if (Math.abs(deltaY) > 5) {
        state.selects = '2'
      }

      let inpH = setH / state.initRatioH2
      let inpW = (state.startWidth - num) / state.initRatioH2
      if (inpH > 2048 || inpW > 2048) {
        debugger
        if (inpH > 2048) {
          inpH = 2048
          state.oldInpimgH = 2048
          emit('setHImgSize', 2048)
        }
        if (inpW > 2048) {
          inpW = 2048
          state.oldInpimgW = 2048
          emit('setWImgSize', 2048)
        }
        if (state.oldInpimgH == 2048 && state.oldInpimgW == 2048) {
          state.maxRedBorder = true
        }
        return
      }
      state.maxRedBorder = false

      state.minRedBorder = false

      state.oldInpimgH = inpH
      emit('setHImgSize', inpH)

      state.oldInpimgW = inpW
      emit('setWImgSize', inpW)

      state.boxH = Math.max(55, setH)
      state.imgtop = state.oldimgtop - deltaY
      state.topDrag = state.oldtopDrag + deltaY

      state.boxW = state.startWidth - num
    }
  }
  updateMousePosition(event)
}

}
}
// -----------end扩图四角拖动-------------

//图片拖动 down
const dragDownImg = (event) => {
if (state.btnStatus == 1) {

if (!state.isDragging2) {
  console.log('进来了1', state.isDragging2)
  event.stopPropagation()
}
state.isDraggingImg = true
state.initialXImg = event.clientX - state.imgleft
state.initialYImg = event.clientY - state.imgtop
document.addEventListener('mousemove', dragMoveImg)
document.addEventListener('mouseup', dragUpEndImg)
/* if (borderCoincide()) {
  state.minRedBorder = true
} else {
  state.minRedBorder = false
} */

}
}
//图片拖动 end
const dragUpEndImg = (event) => {
if (state.btnStatus == 1) {

if (!state.isDragging2) {
  console.log('进来了2')
  event.stopPropagation()
}
state.isDraggingImg = false
state.isDragging = false
document.removeEventListener('mousemove', dragMoveImg)
document.removeEventListener('mouseup', dragUpEndImg)

//拖动四脚角到图片上时 四边的拖动逻辑这里触发
state.isDragging3 = false

//拖动到图片上时 四边的拖动逻辑这里触发
state.isDragging2 = false
state.oldtopDrag = state.topDrag
state.oldleftDrag = state.leftDrag

state.oldimgtop = state.imgtop
state.oldimgleft = state.imgleft

if (state.dragType == 'move2') {
  if (
    (state.dragDirection == 'left' || state.dragDirection == 'right') &&
    state.proportionValue == '自由模式'
  ) {
  }
  if (
    (state.dragDirection == 'top' || state.dragDirection == 'bottom') &&
    state.proportionValue == '自由模式'
  ) {
  }
}

}

// console.log('图片拖动up')
}
//图片拖动3
const dragMoveImg = (event) => {
if (state.btnStatus == 1) {

const target = event.target as HTMLElement
if (state.isDraggingImg) {
  if (target && 'id' in target) {
    if (target.id != 'moveId') {
      return
    }
  }
  if (!state.isDragging2) {
    console.log('进来了3')
    event.stopPropagation()
  }

  let left = event.clientX - state.initialXImg
  let top = event.clientY - state.initialYImg
  if (left < 0) {
    left = 0
  }
  if (top < 0) {
    top = 0
  }
  let maxW = state.boxW - state.imgW
  if (left > maxW) {
    left = maxW
  }
  let maxH = state.boxH - state.imgH
  if (top > maxH) {
    top = maxH
  }
  state.imgtop = top
  state.imgleft = left
  state.oldimgtop = state.imgtop
  state.oldimgleft = state.imgleft
}

}
}

const scaleShowImg2 = () => {
let inpW = state.oldInpimgW //输入框宽
let inpH = state.oldInpimgH
let aW = state.boxoffsetWidth - 150 * 2 //可视区域宽高
let aH = state.boxoffsetHeight - 60 * 2
let rate = 1
if (inpW / aW > inpH / aH) {

//debugger
state.boxW = aW
state.boxH = inpH / (inpW / aW)
rate = inpW / aW

} else {

state.boxH = aH
//debugger
state.boxW = inpW / (inpH / aH)
rate = inpH / aH

}

// state.oldimgW = state.initimgW = state.imgW = state.minw / rate
// state.oldimgH = state.initimgH = state.imgH = state.minh / rate
state.oldimgW = state.imgW = state.minw / rate
state.oldimgH = state.imgH = state.minh / rate
state.initimgleft = state.oldimgleft = state.imgleft = (state.boxW - state.imgW) / 2
state.initimgtop = state.oldimgtop = state.imgtop = (state.boxH - state.imgH) / 2

state.initRatioW2 = state.boxW / state.oldInpimgW //div宽与输入框宽对应比率
state.initRatioH2 = state.boxH / state.oldInpimgH //div宽与输入框宽对应比率
}

// 等比例加载图片
const scaleShowImg = (scale) => {
state.scale = scale
let _imgW = 0
let _imgH = 0
let rate = 0
let rate1 = 0
let rate2 = 0
let imgW = state.imgInfo.resolution[0] //原图宽高
let imgH = state.imgInfo.resolution[1]
let aW = state.boxoffsetWidth - 150 * 2 //可视区域宽高
let aH = state.boxoffsetHeight - 60 * 2
let _boxW = 0
let _boxH = 0
if (scale == '100') {

rate1 = imgW
rate2 = imgH

} else {

rate = scale.split(':') //9:16
rate1 = Number(rate[0])
rate2 = Number(rate[1])

}
let kw2 = aW / (rate1 / rate2)
_boxH = kw2 > aH ? aH : kw2
_boxW = _boxH * (rate1 / rate2)

let _h = imgW / (rate1 / rate2)
let y1 = _h > imgH ? _h : imgH
let x1 = y1 * (rate1 / rate2)
let xyrate = 1
if (x1 > y1 && x1 > 2048) {

_imgW = 2048
_imgH = 2048 / (rate1 / rate2)
xyrate = x1 / 2048

} else if (x1 <= y1 && y1 > 2048) {

_imgH = 2048
_imgW = 2048 * (rate1 / rate2)
xyrate = y1 / 2048

} else {

_imgH = y1
_imgW = x1

}
// debugger
// console.log('实际宽高比图片', y1)
// _imgH = y1 //> 2048?2048:y1
// if (y1 > 2048) {
// _imgH = 2048
// }
// _imgW = _imgH * (rate1 / rate2) //输入框宽高
// if (_imgW > 2048) {
// _imgW = 2048
// _imgH = y1 = 2048 / (rate1 / rate2)
// }
state.oldInpimgW = _imgW
state.oldInpimgH = _imgH

let _imgw2 = 0 // 缩放后要展示的图片宽高
let _imgh2 = 0
// if (y1 > 2048) {
_imgw2 = (imgW / xyrate) * 0.8
_imgh2 = (imgH / xyrate) * 0.8
// } else {
// _imgw2 = imgW * 0.8
// _imgh2 = imgH * 0.8
// }
state.minw = _imgw2
state.minh = _imgh2

state.initoldboxW = state.oldboxW = state.initboxW = state.boxW = _boxW
state.initoldboxH = state.oldboxH = state.initboxH = state.boxH = _boxH
// state.oldboxW = _boxW
// state.oldboxH = _boxH
// state.initoldboxW = _boxW
// state.initoldboxH = _boxH

state.oldimgW = state.initimgW = state.imgW = _imgw2 * (_boxW / _imgW)
state.oldimgH = state.initimgH = state.imgH = _imgh2 * (_boxH / _imgH)

// state.oldimgW = state.imgW
// state.oldimgH = state.imgH

state.initimgleft = state.oldimgleft = state.imgleft = (state.boxW - state.imgW) / 2
state.initimgtop = state.oldimgtop = state.imgtop = (state.boxH - state.imgH) / 2

state.initRatioW = state.boxW / state.oldInpimgW //div宽与输入框宽对应比率
state.initRatioW2 = state.boxW / state.oldInpimgW //div宽与输入框宽对应比率
state.initRatioH = state.boxH / state.oldInpimgH //div宽与输入框宽对应比率
state.initRatioH2 = state.boxH / state.oldInpimgH //div宽与输入框宽对应比率

//_imgW , _imgH 原图宽高根据比例换算后宽高 | 输入框宽高
let minw = 1
let minh = 1
if (state.proportionValue != '自由模式') {

minw = Math.ceil(_imgW) * 0.8
minh = Math.ceil(_imgH) * 0.8

} else {

minw = Math.ceil(_imgw2)
minh = Math.ceil(_imgh2)

}
emit('imgSize', {

w: Math.ceil(_imgW),
h: Math.ceil(_imgH),
minw: minw,
minh: minh

})
}

// 定义一个处理鼠标抬起事件的函数
const handleMouseUp = (event) => {
if (state.btnStatus == 1) {

//有时候@mouseup监听无效 全局拦截
state.isDragging = false
state.isDragging2 = false
state.isDraggingImg = false
// console.log('页面鼠标抬起')

}
}
const handlemouseleave = (event) => {
//有时候@mouseup监听无效全局拦截
state.isDragging = false
state.isDragging2 = false
state.isDraggingImg = false
// console.log('鼠标移出')
}
const wImgSize = (data) => {
let scale = data.w / state.oldInpimgW
if (data.w >= 2048 && state.oldInpimgH == 2048) {

state.maxRedBorder = true

} else {

state.maxRedBorder = false

}
if (data.w <= state.minw && state.oldInpimgH == state.minh) {

state.minRedBorder = true

} else {

state.minRedBorder = false

}
if (data.value == '自由模式') {

// state.oldimgW = state.imgW = state.oldimgW / scale
state.oldInpimgW = data.w
scaleShowImg2()

} else {

state.oldimgW = state.imgW = state.oldimgW / scale
state.oldimgH = state.imgH = state.oldimgH / scale

state.oldInpimgW = data.w
state.oldInpimgH = data.h
state.oldimgleft = state.imgleft = (state.boxW - state.imgW) / 2
state.oldimgtop = state.imgtop = (state.boxH - state.imgH) / 2

state.initRatioW2 = state.boxW / state.oldInpimgW //div宽与输入框宽对应比率
state.initRatioH2 = state.boxH / state.oldInpimgH //div宽与输入框宽对应比率

}

getCenter()
}
const hImgSize = (data) => {
let scale = data.h / state.oldInpimgH
if (data.h >= 2048 && state.oldInpimgW == 2048) {

state.maxRedBorder = true

} else {

state.maxRedBorder = false

}
if (data.h <= state.minh && state.oldInpimgW == state.minw) {

state.minRedBorder = true

} else {

state.minRedBorder = false

}

if (data.value == '自由模式') {

// state.oldimgH = state.imgH = state.oldimgH / scale
state.oldInpimgH = data.h
scaleShowImg2()

} else {

state.oldimgW = state.imgW = state.oldimgW / scale
state.oldimgH = state.imgH = state.oldimgH / scale

state.oldInpimgW = data.w
state.oldInpimgH = data.h
state.oldimgleft = state.imgleft = (state.boxW - state.imgW) / 2
state.oldimgtop = state.imgtop = (state.boxH - state.imgH) / 2

state.initRatioW2 = state.boxW / state.oldInpimgW //div宽与输入框宽对应比率
state.initRatioH2 = state.boxH / state.oldInpimgH //div宽与输入框宽对应比率

}
getCenter()
}
const genarateImage = () => {
let res = getTBLR()
let params = {

left: parseInt(res.left + ''),
top: parseInt(res.top + ''),
right: parseInt(res.right + ''),
bottom: parseInt(res.down + ''),
width: parseInt(res.width + ''), //此处传原图宽高
height: parseInt(res.height + ''),
imageId: state.imgInfo.imgaeId

}
/* let params = {

left: parseInt(state.imgleft + ''),
top: parseInt(state.imgtop + ''),
right: parseInt(state.boxW - state.imgleft - state.imgW + ''),
bottom: parseInt(state.boxH - state.imgtop - state.imgH + ''),
width: parseInt(state.imgW + ''),
height: parseInt(state.imgH + ''),
imageId: state.imgInfo.imgaeId

} */

return params

// console.log(params);
}

onUnmounted(() => {
document.removeEventListener('mouseup', handleMouseUp)

document.removeEventListener('mousemove', dragMoveImg)
document.removeEventListener('mouseup', dragUpEndImg)
state.btnStatus = 0
})
// 更新坐标（带节流优化）
const updateMousePosition = throttle(function (e) {
pointTip.style.left = ${e.clientX - 180}px
pointTip.style.top = ${e.clientY - 100}px
// let res = getTBLR()
// pointTip.innerHTML = W： ${res.width.toFixed()}  H： ${res.height.toFixed()}
pointTip.innerHTML = W： ${state.oldInpimgW.toFixed()}  H： ${state.oldInpimgH.toFixed()}
}, 60) // 约60fps
let pointTip
onMounted(async () => {
pointTip = document.getElementById('point-tip') as HTMLCanvasElement
// 使用 addEventListener 方法监听全局的 mouseup 事件
document.addEventListener('mouseup', handleMouseUp)
// document.getElementById('bg-container').addEventListener('mouseleave', handlemouseleave)
on('wImgSize', wImgSize)
on('hImgSize', hImgSize)
state.btnStatus = 1
state.boxoffsetWidth = boxRef.value!.offsetWidth
state.boxoffsetHeight = boxRef.value!.offsetHeight
nextTick(() => {

// 模拟数据
/* let data = {
  imgUrl:'https://img0.baidu.com/it/u=48465464,3484394863&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
  resolution: [1920, 1080]
}
imgInfo(data) */

})
})
defineExpose({
ratioMode,
imgInfo,
getImgInfo,
genarateImage
})
</script>
<template>

<!-- 展示等比例扩展图和自由扩展图大小 -->
<div v-show="Object.keys(state.imgInfo).length !== 0 && !state.isCustom" class="drag-container" :class="{ 'red-border': state.maxRedBorder || state.minRedBorder }" :style="{
    width: state.boxW + 'px',
    height: state.boxH + 'px',
    left: state.leftDrag + 'px',
    top: state.topDrag + 'px'
  }" @mousedown="dragStart" @mouseup="dragEnd" @mousemove="dragMove">

  <div id="moveId" @mousedown="dragDownImg" @mouseup="dragUpEndImg" @mousemove="dragMoveImg" class="object-contain" :style="{
      'background-image': `url(${state.imgInfo.imgUrl})`,
      width: state.imgW - 2 + 'px',
      height: state.imgH - 2 + 'px',
      top: state.imgtop + 'px',
      left: state.imgleft + 'px'
    }">
  </div>

  <!-- 四边拖动  -->
  <div v-if="state.proportionValue === '自由模式'" class="handle handle-tm" @mousedown="dragStart2($event, 'top')" @mouseup="dragEnd2($event, 'top')" @mousemove="onDragging2($event, 'top')"></div>

  <div v-if="state.proportionValue === '自由模式'" class="handle handle-mr" @mousedown="dragStart2($event, 'right')" @mouseup="dragEnd2($event, 'right')" @mousemove="onDragging2($event, 'right')">
  </div>

  <div v-if="state.proportionValue === '自由模式'" class="handle handle-bm" @mousedown="dragStart2($event, 'bottom')" @mouseup="dragEnd2($event, 'bottom')" @mousemove="onDragging2($event, 'bottom')">
  </div>

  <div v-if="state.proportionValue === '自由模式'" class="handle handle-ml" @mousedown="dragStart2($event, 'left')" @mouseup="dragEnd2($event, 'left')" @mousemove="onDragging2($event, 'left')">
  </div>

  <!-- 四角拖动 tl , tr, br, bl-->
  <div v-if="state.proportionValue != '自由模式'" class="handle2 handle-tl" @mousedown="dragStart3($event, 'top')" @mouseup="dragEnd3($event, 'top')" @mousemove="onDragging3($event, 'top')"></div>

  <div v-if="state.proportionValue != '自由模式'" class="handle2 handle-tr" @mousedown="dragStart3($event, 'right')" @mouseup="dragEnd3($event, 'right')" @mousemove="onDragging3($event, 'right')">
  </div>

  <div v-if="state.proportionValue != '自由模式'" class="handle2 handle-br" @mousedown="dragStart3($event, 'bottom')" @mouseup="dragEnd3($event, 'bottom')" @mousemove="onDragging3($event, 'bottom')">
  </div>

  <div v-if="state.proportionValue != '自由模式'" class="handle2 handle-bl" @mousedown="dragStart3($event, 'left')" @mouseup="dragEnd3($event, 'left')" @mousemove="onDragging3($event, 'left')">
  </div>
</div>
<div id="point-tip"></div>

<!-- 没有图片时展示icon样式 -->
<div v-show="Object.keys(state.imgInfo).length === 0" class="show-icon w-[140px] h-[140px] absolute top-50% left-50% transform-translate-y-[-50%] transform-translate-x-[-50%]"></div>

</div>

</template>
<style lang="less" scoped>
#point-tip {

position: absolute;
z-index: 1000;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
font-size: 12px;
padding: 8px 12px;
background: #000000;
opacity: 0.8;
white-space: nowrap;
pointer-events: none; /* 防止干扰鼠标操作 */
display: none; /* 默认隐藏 */
top: -300px;
left: -300px;
// display: block;
// top: 300px;
// left: 300px;

}
.show-icon {

background-image: url('../../../assets/imgs/showBlock.png');
background-repeat: no-repeat;
background-size: contain;

}
.img-box {

background-image: url(../../../assets/imgs/bg-grid.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;

}
:deep(.vdr) {

position: relative;
border: 1px solid #4949fc;

}
.bg-container {

display: flex;
justify-content: center;
align-items: center;
.drag-container {
  border: 1px solid #4949fc;
  position: absolute;
  .handle {
    box-sizing: border-box;
    position: absolute;
    z-index: 99;
    width: 6px;
    height: 22px;
    background: #4949fc;
    border: 1px solid #4949fc;
    box-shadow: 0 0 2px #4949fc;
  }
  .handle-tm {
    width: 25px;
    height: 8px;
    top: -5px;
    left: 50%;
    margin-left: -10px;
    background-color: #4949fc;
    border-radius: 7px;
    cursor: n-resize;
  }
  .handle-mr {
    width: 8px;
    height: 25px;
    margin-top: -10px;
    right: -5px;
    top: 50%;
    background-color: #4949fc;
    border-radius: 7px;
    cursor: w-resize;
  }
  .handle-ml {
    width: 8px;
    height: 25px;
    left: -5px;
    top: 50%;
    margin-top: -10px;
    background-color: #4949fc;
    border-radius: 7px;
    cursor: w-resize;
  }
  .handle-bm {
    width: 25px;
    height: 8px;
    left: 50%;
    bottom: -5px;
    margin-left: -10px;
    background-color: #4949fc;
    border-radius: 7px;
    cursor: n-resize;
  }
  .handle2 {
    box-sizing: border-box;
    position: absolute;
    z-index: 99;
    width: 25px;
    height: 25px;
  }
  .handle-tl {
    top: -2px;
    left: -2px;
    border-top: 4px solid #4949fc;
    border-left: 4px solid #4949fc;
    cursor: nw-resize;
  }
  .handle-tr {
    top: -2px;
    right: -2px;
    border-top: 4px solid #4949fc;
    border-right: 4px solid #4949fc;
    cursor: sw-resize;
  }
  .handle-br {
    bottom: -2px;
    right: -2px;
    border-bottom: 4px solid #4949fc;
    border-right: 4px solid #4949fc;
    cursor: nw-resize;
  }
  .handle-bl {
    bottom: -2px;
    left: -2px;
    border-bottom: 4px solid #4949fc;
    border-left: 4px solid #4949fc;
    cursor: sw-resize;
  }
}
.red-border {
  border: 1px solid red;
  .handle {
    background: red;
    box-shadow: 0 0 2px red;
    border: 1px solid red;
  }
  .handle-tl {
    border-top: 4px solid red;
    border-left: 4px solid red;
  }
  .handle-tr {
    border-top: 4px solid red;
    border-right: 4px solid red;
  }
  .handle-br {
    border-bottom: 4px solid red;
    border-right: 4px solid red;
  }
  .handle-bl {
    border-bottom: 4px solid red;
    border-left: 4px solid red;
  }
}

}

.object-contain {

position: relative;
user-select: none;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;

}
.img-icon {

position: absolute;
position: absolute;
right: 10px;
bottom: 10px;

}
</style>

模仿美图秀秀对图片进行各种扩图，超出最大宽时进行等比缩小

煌大河ゞ

引用和评论

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

vite5+tauri2.0客户端仿微信Exe聊天程序|tauri2+rust+vue3聊天实例

Vite5-Electron31Admin：基于electron31+vue3+pinia2桌面端后台管理模板

Vue3-ChatGPT：基于vite4.x+vue3+pinia2模仿chatgpt聊天AI实例

使用 DeepSeek R1 和 Ollama 开发 RAG 系统（包含完整代码）

本地部署DeepSeek硬件配置清单，满血版太炸裂了！

TypeScript中的Omit与Pick：何时使用