JavaScript使用H5 FileReader和Image对象获取本地图片的分辨率

最新推荐文章于 2025-04-18 10:12:00 发布

原创

最新推荐文章于 2025-04-18 10:12:00 发布 · 7.3k 阅读

标签

#FileReader #H5 #Image #JavaScript #图片分辨率

收录于

本文介绍了一种前端图片上传前的分辨率校验方法，通过FileReader将图片转换为base64格式，利用Image对象获取图片尺寸，最后用Promise实现异步处理，确保用户体验。

业务场景

试想这样的应用场景：

当我们上传本地图片时，需要校验图片的分辨率，只有水平分辨率不大于1920、垂直分辨率不大于1080的图片才允许上传。

后端处理方案

显然，我们是可以将分辨率校验交给后端的，这样的问题在于，后端校验需要前端先发起ajax请求，并且后端校验也需要一定的处理时间，就整体体验而言，用户等待时间较长，不利于用户体验。

因此还是推荐前端校验，直接给出结果。

难点所在

对于type='file'的input框，在其change事件中，我们可以直接拿到file对象，包含了name、size等属性，但是并不包含分辨率数据。因为这时，图片尚未渲染到dom中，浏览器不知道这是一个图片，拿不到分辨率也可以理解。如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" accept="image/jpg,image/jpeg,image/png" id="fileInput"