在上传图片时，存在需要判断图片的宽高是否符合需求的场景（如指定 Icon 尺寸）。那么前端如何判断上传图片尺寸（宽度和高度）？
实现
核心实现
javascript
const img = new Image();
img.onload = function() {
const width = img.width;
const height = img.height;
}
img.src = 'https://www.gstatic.com/webp/gallery/1.jpg'- 创建一个
Image对象 - 设置
Image对象的src属性 - 在加载完成后检测尺寸。通过
width和height属性
上传中获取
一般需要判断上传图片尺寸的场景都是在上传图片时，需要判断。上传图片完成后，只需要通过 FileReader 或者 URL.createObjectURL(file) 将图片文件转换为临时 URL 并将其赋值给 Image 对象的 src 属性
html
<input type="file" id="imageInput" accept="image/*">
<p id="output"></p>
<script>
document.getElementById('imageInput').addEventListener('change', function (event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const width = img.width;
const height = img.height;
document.getElementById('output').textContent = `Image Dimensions: ${width} x ${height}`;
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
} else {
document.getElementById('output').textContent = 'No file selected';
}
});
</script>封装一下
将从上传的图片文件中获取 src 和获取图片尺寸的函数使用 Promise 封装一下，可以更方便复用
javascript
function getImageSize(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = function () {
const width = img.width;
const height = img.height;
resolve({ width, height })
}
img.src = src
})
}
function getImageSrcFromFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = function (e) {
resolve(e.target.result)
}
reader.readAsDataURL(file);
})
}
function getImageSrc(file) {
return URL.createObjectURL(file)
// 注意后续需要调用 URL.revokeObjectURL(src) 释放内存
}使用：
javascript
document.getElementById('imageInput').addEventListener('change', async function (event) {
const file = event.target.files[0];
if (file) {
const src = await getImageSrcFromFile(file);
const { width, height } = await getImageSize(src);
document.getElementById('output').textContent = `Image Dimensions: ${width} x ${height}`;
} else {
document.getElementById('output').textContent = 'No file selected';
}
});