在 Vue 3 中获取图片元素的宽高：原始尺寸与缩放后尺寸的处理方法

1.获取原始尺寸（不受代码修改大小影响）

originalWidth.value = imageRef.value.naturalWidth;//获取原始宽度

originalHeight.value = imageRef.value.naturalHeight;//获取原始高度

2.当对图片应用了 transform: scale() 进行缩放后，width 和 height 属性仍然返回未缩放前的尺寸。为了获取缩放后的实际显示尺寸，可以使用 getBoundingClientRect() 方法，该方法返回元素的大小及其相对于视口的位置，包括应用的 CSS 变换。

// 获取初始显示尺寸

const rect = imageRef.value.getBoundingClientRect();

imageWidth.value = rect.width;//修改后的尺寸

imageHeight.value = rect.height;//修改后的尺寸