JS 解析 png 图片的分辨率(宽高)

创建一个文件

sh 复制代码
touch image-size.cjs

然后写入下面内容:

js 复制代码
const fs = require('fs');
const path = require('path');

// PNG文件头结构:
// 前8字节:文件签名
// 第12-16字节:宽度(4字节大端)
// 第16-20字节:高度(4字节大端)
function getPNGDimensions(filePath) {
  try {
    // 读取文件前24字节
    const data = fs.readFileSync(filePath, { length: 24 });

    // 验证PNG文件签名
    const signature = data.toString('hex', 0, 8);
    if (signature !== '89504e470d0a1a0a') {
      throw new Error('不是有效的PNG文件');
    }

    // 提取宽度和高度(大端序)
    const width = data.readUInt32BE(16);
    const height = data.readUInt32BE(20);

    return { width, height };
  } catch (err) {
    console.error(`读取 ${path.basename(filePath)} 失败:`, err.message);
    return null;
  }
}

// 使用示例
const imgDir = path.join(__dirname, 'images');

fs.readdir(imgDir, (err, files) => {
  if (err) throw err;

  files.forEach(file => {
    if (path.extname(file).toLowerCase() === '.png') {
      const filePath = path.join(imgDir, file);
      const dimensions = getPNGDimensions(filePath);

      if (dimensions) {
        console.log(
          `${file.padEnd(20)} 分辨率: ${dimensions.width}x${dimensions.height}`
        );
      }
    }
  });
});

现在,运行上面代码,可以打印出文件夹 images 中所有 png 图片的分辨率。

参考链接:

相关推荐
名字还没想好☜6 小时前
React 实现暗黑模式切换:localStorage 持久化、SSR 首屏闪烁与跟随系统主题
前端·javascript·react.js·ecmascript·react·next.js
自动化监测Learner7 小时前
主流 Web 端地图引擎对比:选型指南与优劣分析
javascript
宿67411 小时前
vue3-config
前端·javascript·vue.js
ShineWinsu13 小时前
对于 Vue 3:从为什么学 Vue,到声明式渲染与数据响应式的解析
前端·javascript·vue.js
leoZ23115 小时前
第 6 篇:SchemaForm 渲染器核心实现
前端·javascript·vue.js·人工智能·神经网络·机器学习·自然语言处理
CoderYanger15 小时前
前端基础——JavaScript(基础语法)(下篇)
java·开发语言·前端·javascript·程序人生·面试·职场和发展
还是大剑师兰特15 小时前
vue项目浏览器版本判别,低于IE11跳转到新页面
前端·javascript·vue.js
想吃火锅100516 小时前
【leetcode】42.接雨水js
开发语言·javascript·ecmascript
雪芽蓝域zzs17 小时前
第十六节:递归组件实现无限层级折叠侧边栏菜单
开发语言·javascript·ecmascript
BillKu18 小时前
vue3 字符串排序 localeCompare,确保排序为 “B01“, “B10“, “B2“
前端·javascript·vue.js