<think>我们正在处理一个Vue 3中
获取图片尺寸（宽度和高度）的问题。根据引用内容，我们可以采用以下方法：
引用[2]提到：可以通过创建一个
Image对象，然后设置其src为
图片URL，在
图片加载完成后
获取其自然宽度和高度（即原始
尺寸）。
引用[3]提到：如果
图片被CSS缩放（例如transform: scale
()），那么使用getBoundingClientRect
()可以
获取到缩放后的实际显示
尺寸。
因此，我们需要分两种情况：
1
. 获取图片的原始
尺寸（未缩放时的
尺寸）
2
. 获取图片在页面中实际显示的
尺寸（考虑CSS缩放后的
尺寸）
### 解决方案
#### 方法1：
获取图片原始
尺寸（自然
尺寸）
我们可以使用`new
Image()`来创建一个
图片对象，然后监听其加载事件，在加载完成后
获取其自然宽度和高度。
示例代码（Vue 3 Composition API）：
```vue
<template>
<div>
<img ref="imgElement" :src="imgUrl" @load="on
ImageLoad">
</div>
</template>
<script setup>
import { ref } from 'vue';
const imgUrl = ref
('https://example
.com/
image.jpg'
);
const imgElement = ref
(null
); // 用于
获取img元素的引用
// 方法1：通过
Image对象
获取原始
尺寸（不依赖DOM）
function get
ImageNaturalSize
(url, callback
) {
const img = new
Image();
img
.src = url;
img
.onload =
() => {
callback
({
naturalWidth: img
.naturalWidth,
naturalHeight: img
.naturalHeight
}
);
};
}
// 方法2：在
图片加载事件中通过DOM
获取自然
尺寸（也可以直接通过img元素
获取）
const on
ImageLoad =
() => {
if
(imgElement
.value
) {
const naturalWidth = imgElement
.value
.naturalWidth;
const naturalHeight = imgElement
.value
.naturalHeight;
console
.log
('自然
尺寸:', naturalWidth, naturalHeight
);
}
};
// 使用方法1
get
ImageNaturalSize
(imgUrl
.value,
(size
) => {
console
.log
('原始
尺寸:', size
.naturalWidth, size
.naturalHeight
);
}
);
</script>
```
#### 方法2：
获取图片在页面中实际显示的
尺寸（考虑CSS缩放）
如果
图片被CSS缩放，我们需要使用`getBoundingClientRect
()`来
获取实际渲染的宽度和高度。
示例代码（在
图片加载事件中）：
```vue
<template>
<div>
<img ref="imgElement" :src="imgUrl" @load="on
ImageLoad">
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const imgUrl = ref
('https://example
.com/
image.jpg'
);
const imgElement = ref
(null
);
const on
ImageLoad =
() => {
if
(imgElement
.value
) {
//
获取实际渲染的
尺寸（包括任何CSS变换）
const rect = imgElement
.value
.getBoundingClientRect
();
console
.log
('实际显示
尺寸:', rect
.width, rect
.height
);
}
};
</script>
```
### 注意事项
1
. **确保
图片已加载**：一定要在
图片加载完成后再
获取尺寸（使用`@load`事件监听）。
2
. **跨域
图片**：如果
图片来自不同域且服务器未设置CORS，可能会遇到问题（尤其是使用`new
Image()`方式）。确保
图片服务器允许跨域访问，或者将
图片放在同域下。
3
. **响应式
图片**：如果
图片尺寸会随着窗口大小变化，你可能还需要监听窗口的`resize`事件，并在回调中重新
获取`getBoundingClientRect
()`。
### 完整示例（同时
获取自然
尺寸和实际显示
尺寸）
```vue
<template>
<div>
<img ref="imgElement" :src="imgUrl" @load="on
ImageLoad" :style="{ transform: 'scale
(0
.5
)' }">
</div>
</template>
<script setup>
import { ref } from 'vue';
const imgUrl = ref
('https://example
.com/
image.jpg'
);
const imgElement = ref
(null
);
const on
ImageLoad =
() => {
if
(imgElement
.value
) {
// 自然
尺寸（原始
尺寸）
const naturalWidth = imgElement
.value
.naturalWidth;
const naturalHeight = imgElement
.value
.naturalHeight;
console
.log
('自然
尺寸:', naturalWidth, naturalHeight
);
// 实际显示
尺寸（考虑CSS缩放）
const rect = imgElement
.value
.getBoundingClientRect
();
console
.log
('实际显示
尺寸:', rect
.width, rect
.height
);
}
};
</script>
```
### 引用说明
- 引用[2]提供了使用`new
Image()`
获取图片原始
尺寸的方法[^2]。
- 引用[3]指出使用`getBoundingClientRect
()`可以
获取应用了CSS变换（如缩放）后的实际
尺寸[^3]。
### 相关问题
1
. 在Vue 3中如何监听窗口大小变化以重新
获取图片尺寸？
2
. 如何处理跨域
图片的
尺寸获取？
3
. Vue 3中如何实现
图片的懒加载并
获取其
尺寸？</think>在 Vue 3 中
获取图片的
尺寸（宽度和高度）可以通过以下几种方法实现，根据您的具体需求选择合适方案：
### 方法 1：使用
Image 对象
获取原始
尺寸（推荐）
```
javascript
// 在 Vue 组件中
import { ref } from 'vue';
const imgUrl = ref
('https://example
.com/
image.jpg'
);
const imgWidth = ref
(0
);
const imgHeight = ref
(0
);
// 创建
Image 对象
获取尺寸
const get
ImageDimensions =
(url
) => {
const img = new
Image();
img
.src = url;
img
.onload =
() => {
imgWidth
.value = img
.width; // 原始宽度
imgHeight
.value = img
.height; // 原始高度
console
.log
('原始
尺寸:', img
.width, 'x', img
.height
);
};
img
.onerror =
(e
) => {
console
.error
('
图片加载失败', e
);
};
};
// 调用方法
get
ImageDimensions
(imgUrl
.value
);
```
### 方法 2：通过 DOM 元素
获取（含 CSS 缩放处理）
```vue
<template>
<img
ref="imgRef"
:src="imgUrl"
@load="handle
ImageLoad"
class="scaled-
image" <!-- 应用了 transform: scale
(0
.8
) -->
>
</template>
<script setup>
import { ref } from 'vue';
const imgRef = ref
(null
);
const imgUrl = 'https://example
.com/
image.jpg';
const handle
ImageLoad =
() => {
if
(imgRef
.value
) {
//
获取原始
尺寸
const naturalWidth = imgRef
.value
.naturalWidth;
const naturalHeight = imgRef
.value
.naturalHeight;
//
获取实际渲染
尺寸（含 CSS 缩放）
const rect = imgRef
.value
.getBoundingClientRect
();
const displayWidth = rect
.width;
const displayHeight = rect
.height;
console
.log
('原始
尺寸:', naturalWidth, naturalHeight
);
console
.log
('显示
尺寸:', displayWidth, displayHeight
);
}
};
</script>
<style>
.scaled-
image {
transform: scale
(0
.8
); /* CSS 缩放示例 */
}
</style>
```
### 方法 3：使用 Composition API 封装可复用逻辑
```
javascript
// utils/use
ImageDimensions
.js
import { ref } from 'vue';
export default function use
ImageDimensions
() {
const width = ref
(0
);
const height = ref
(0
);
const isLoading = ref
(false
);
const error = ref
(null
);
const getDimensions =
(url
) => {
isLoading
.value = true;
error
.value = null;
const img = new
Image();
img
.src = url;
img
.onload =
() => {
width
.value = img
.naturalWidth;
height
.value = img
.naturalHeight;
isLoading
.value = false;
};
img
.onerror =
(e
) => {
error
.value = '
图片加载失败';
isLoading
.value = false;
console
.error
(e
);
};
};
return { width, height, isLoading, error, getDimensions };
}
```
```vue
<!-- 在组件中使用 -->
<script setup>
import use
ImageDimensions from '@/utils/use
ImageDimensions';
const { width, height, isLoading, getDimensions } = use
ImageDimensions
();
//
获取图片尺寸
getDimensions
('https://example
.com/
image.jpg'
);
</script>
<template>
<div v-if="isLoading">加载中
...</div>
<div v-else-if="width">
图片尺寸: {{ width }} x {{ height }} 像素
</div>
</template>
```
### 关键区别说明
| **方法** | **
获取内容** | **是否受 CSS 影响** | **使用场景** |
|------------------------|-----------------------------|--------------------|--------------------------------|
| `img
.naturalWidth` |
图片原始
尺寸 | ❌ 不受影响 | 需要原始
图片尺寸时 |
| `getBoundingClientRect
()` | 实际渲染
尺寸（含缩放） | ✅ 受影响 | 需要页面中实际显示
尺寸时 |
| `img
.width` | DOM 元素属性值 | ✅ 受影响 | 需要当前元素属性值时 |
### 注意事项
1
. **加载时机**：确保在
图片加载完成后
获取尺寸（使用 `@load` 事件或 `img
.onload`）
2
. **响应式处理**：如果
图片尺寸会变化，监听 `window
.resize` 事件重新
获取
3
. **跨域问题**：跨域
图片可能需要 CORS 配置才能
获取尺寸
4
. **动态
图片**：当
图片 URL 变化时，需要重新触发
尺寸获取逻辑
> 引用说明：通过创建 `
Image` 对象
获取原始
尺寸的方法参考了音乐盒项目的实现[^2]，而使用 `getBoundingClientRect
()`
获取缩放后
尺寸则参考了 CSS 变换处理方案[^3]。
### 相关问题
1
. 如何在 Vue 3 中实现
图片懒加载并
获取其
尺寸？
2
. Vue 3 中如何监听窗口大小变化并重新计算
图片尺寸？
3
. 如何处理跨域
图片的
尺寸获取问题？
4
. 如何实现
图片上传前的
尺寸验证？
5
. Vue 3 中如何创建响应式的
图片尺寸检测组件？
本文详细介绍了如何使用Java的ImageIo和BufferedImage类来获取图片的尺寸，并解释了这两个类的基本用法。此外，文章还提供了Java API文档的链接，供读者深入学习。
扫一扫
1140
到【灌水乐园】发言
