图片放大缩小的功能优化

src/components/shared/MarkHeader.vue

@@ -233,12 +233,41 @@ const validVal = (val: number, max: number, min: number) => {
   return Math.min(max, Math.max(val, min))
 }
 
+let imgLastWidth = 0
+
+const getImgDomWidth = () => {
+  let imgDom = document.querySelector('.paper-img')
+  return imgDom ? imgDom.clientWidth : 0
+}
+const changeFun = () => {
+  const imgDom: any = document.querySelector('.paper-img')
+  imgDom.onload = () => {
+    const newImgWidth = getImgDomWidth()
+    if (newImgWidth == imgLastWidth && imgLastWidth > 0) {
+      imgLastWidth = 0
+      ratio.value = validVal(minus(ratio.value, 0.1), 2, 0.5)
+      saveMarkSet()
+    }
+  }
+}
+let imgObserver: any = null
+const createImgObserver = () => {
+  if (!imgObserver) {
+    imgObserver = new MutationObserver(() => {
+      changeFun()
+    })
+    imgObserver.observe(document.querySelector('.paper-img'), { attributes: true })
+  }
+}
+
 const onOperationClick = (button: HeaderButton) => {
   if (['front-color', 'background-color'].includes(button.type)) {
     return
   }
   switch (button.type) {
     case 'scale-up':
+      imgLastWidth = getImgDomWidth()
+      createImgObserver()
       ratio.value = validVal(add(ratio.value, 0.1), 2, 0.5)
       saveMarkSet()
       break

src/hooks/useSetImgBg.ts

@@ -122,45 +122,6 @@ export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string
 
     if (!isDom<HTMLImageElement>(image)) {
       image = await new Promise<HTMLImageElement>((resolve, reject) => {
-        // const img = new Image()
-        // img.src = image as string
-        // img.onload = async () => {
-        //   if (frontColor && setFrontColor) {
-        //     // console.time()
-        //     try {
-        //       const result = await analyze(image, { scale: 0.2 })
-        //       const bgColorRgb = result[0].color
-        //       const bgColorNum = bgColorRgb.split('rgb(')[1].slice(0, -1)
-        //       const splitArr = bgColorNum.split(',')
-        //       const hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))
-        //       if (!userSetColor?.value) {
-        //         setFrontColor('#' + hex)
-        //       }
-        //     } catch {}
-        //     // console.timeEnd()
-
-        //     // const canvas = document.createElement('canvas')
-        //     // const maxVal = getRgba(canvas, this)
-        //     // console.log('maxVal:', maxVal)
-        //     // const splitArr = maxVal.split(',')
-        //     // const hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))
-        //     // if (!userSetColor?.value) {
-        //     //   setFrontColor('#' + hex)
-        //     // }
-        //   }
-
-        //   resolve(img)
-        // }
-        // img.onerror = () => {
-        //   console.log('img error')
-        //   ElMessage.error('图片渲染失败：' + filePath)
-        //   reject()
-        // }
-        // img.onabort = () => {
-        //   console.log('img aborted')
-        //   reject()
-        // }
-
         autoLoadImage(image, 0)
           .then(async (resultImg: any) => {
             if (frontColor && setFrontColor) {