如何使用Javascript获取目录内存储图片的宽度和高度

需要根据代码运行环境（浏览器/Node.js）选择对应方案，两类环境的文件访问权限逻辑差异很大。

浏览器环境 #

受浏览器安全策略限制，网页无法在无用户授权的情况下直接读取本地任意指定目录的文件，必须通过用户主动操作获取目录/文件访问权限后才能读取图片信息：

• 常规场景：通过文件选择器让用户选中目标图片/目录
  拿到文件对象后，创建临时URL挂载到Image对象上，等图片加载完成后读取原始尺寸：

  // 页面挂载文件选择器：<input type="file" id="filePicker" accept="image/*" multiple webkitdirectory>
  const filePicker = document.getElementById('filePicker');
  filePicker.addEventListener('change', (e) => {
    const files = Array.from(e.target.files);
    files.forEach(file => {
      if (!file.type.startsWith('image/')) return;
      // 创建临时访问地址
      const imgUrl = URL.createObjectURL(file);
      const img = new Image();
      img.onload = () => {
        // 注意：必须用naturalWidth/naturalHeight拿原始尺寸，width/height会受CSS影响不准
        console.log(`图片${file.name}的宽：${img.naturalWidth}，高：${img.naturalHeight}`);
        // 释放临时地址，避免内存泄漏
        URL.revokeObjectURL(imgUrl);
      }
      img.src = imgUrl;
    })
  })
  

• 现代浏览器兼容方案：使用File System Access API
  可以主动唤起目录授权弹窗，拿到用户授权的指定目录句柄后，遍历目录内的图片文件，后续读取尺寸的逻辑和上面完全一致。

Node.js环境 #

Node.js拥有本地文件系统的完整访问权限，可以直接读取指定目录下的图片文件，有两种常用实现方式：

• 推荐方案：使用成熟的尺寸解析包
  用image-size这类轻量包不需要加载完整图片，仅读取文件头就能拿到尺寸，支持所有常见图片格式，使用成本极低：

  # 安装依赖
  npm i image-size
  

  const fs = require('fs/promises');
  const path = require('path');
  const sizeOf = require('image-size');
  
  async function getDirImagesSize(targetDir) {
    // 读取目录下所有文件
    const files = await fs.readdir(targetDir);
    for (const file of files) {
      const ext = path.extname(file).toLowerCase();
      if (!['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(ext)) continue;
      const filePath = path.join(targetDir, file);
      const dimensions = sizeOf(filePath);
      console.log(`图片${file}的宽：${dimensions.width}，高：${dimensions.height}`);
    }
  }
  
  // 传入目标目录路径调用即可
  getDirImagesSize('./your/target/dir');
  

• 无依赖方案：手动解析文件头
  如果不想引入第三方包，可以针对需要支持的图片格式，读取文件开头几十字节的二进制数据，按照对应格式的编码规则解析出宽高，适合对依赖体积有严格要求的场景，缺点是需要自行处理不同格式的兼容逻辑。

注意事项 #

• 浏览器环境下不要直接读取Image对象的width/height属性，这两个值会受CSS样式、HTML属性设置影响，和图片原始尺寸可能不一致，必须用naturalWidth/naturalHeight获取真实尺寸。
• 图片加载是异步过程，必须等onload事件触发后再读取尺寸，否则会拿到0或者undefined。
• Node.js环境下解析大尺寸图片时，不要把整个文件读入内存，仅读取文件头部的少量数据即可完成尺寸解析，能大幅提升性能。

内容的提问来源于stack exchange，提问作者Eduardo