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;//修改后的尺寸