perf: 图片替换行为优化

src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue

@@ -74,7 +74,7 @@ import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import type { PPTImageElement, SlideBackground } from '@/types/slides'
 import { CLIPPATHS } from '@/configs/imageClip'
-import { getImageDataURL } from '@/utils/image'
+import { getImageDataURL, getImageSize } from '@/utils/image'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ElementOutline from '../common/ElementOutline.vue'
@@ -222,8 +222,31 @@ const replaceImage = (files: FileList) => {
   const imageFile = files[0]
   if (!imageFile) return
   getImageDataURL(imageFile).then(dataURL => {
-    const props = { src: dataURL }
+    const originWidth = handleImageElement.value.width
-    updateImage(props)
+    const originHeight = handleImageElement.value.height
+    const originLeft = handleImageElement.value.left
+    const originTop = handleImageElement.value.top
+    const centerX = originLeft + originWidth / 2
+    const centerY = originTop + originHeight / 2
+
+    getImageSize(dataURL).then(({ width, height }) => {
+      const h = originHeight
+      const w = width * (originHeight / height)
+      const l = centerX - w / 2
+      const t = centerY - h / 2
+
+      slidesStore.removeElementProps({
+        id: handleElementId.value,
+        propName: 'clip',
+      })
+      updateImage({
+        src: dataURL,
+        width: w,
+        height: h,
+        left: l,
+        top: t,
+      })
+    })
   })
 }