前端如何判断上传图片尺寸(宽度和高度)

在上传图片时,存在需要判断图片的宽高是否符合需求的场景(如指定 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'
  1. 创建一个 Image 对象
  2. 设置 Image 对象的 src 属性
  3. 在加载完成后检测尺寸。通过 widthheight 属性

上传中获取

一般需要判断上传图片尺寸的场景都是在上传图片时,需要判断。上传图片完成后,只需要通过 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';
  }
});

参考链接

相关推荐
trsoliu11 小时前
2025年Web前端最新趋势:React基金会成立、AI编码助手崛起与Astro极速搜索
前端·javascript·react.js
一 乐11 小时前
商城推荐系统|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·商城推荐系统
亿元程序员11 小时前
为什么游戏公司现在都喜欢用protobuf?
前端
鹏多多11 小时前
React瀑布流Masonry-Layout插件全方位指南:从基础到进阶实践
前端·javascript·react.js
fruge11 小时前
前端数据可视化实战:Chart.js vs ECharts 深度对比与实现指南
前端·javascript·信息可视化
卓码软件测评11 小时前
借助大语言模型实现高效测试迁移:Airbnb的大规模实践
开发语言·前端·javascript·人工智能·语言模型·自然语言处理
IT_陈寒11 小时前
SpringBoot 3.0实战:这套配置让我轻松扛住百万并发,性能提升300%
前端·人工智能·后端
♡喜欢做梦11 小时前
Spring Web MVC 入门秘籍:从概念到实践的快速通道(上)
前端·spring·mvc
Dragon Wu11 小时前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
艾小码11 小时前
2025年前端菜鸟自救指南:从零搭建专业开发环境
前端·javascript