diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue index f9f7afe3..8042b85f 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue +++ b/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 } - updateImage(props) + const originWidth = handleImageElement.value.width + 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, + }) + }) }) }