🖼 Node.js 获取图片尺寸并判断横屏或竖屏的三种方式对比

背景

在最近的视频合成过程中,发现后端返回的宽高数据存在顺序错误------宽高值被互换,导致前端在解析视频尺寸时出现异常,渲染结果失真。为确保尺寸的准确性,我们采用了通过关键帧截图来获取实际视频分辨率的方案,借助图片的像素尺寸进行校验和替代。该方式不仅规避了接口数据错误的影响,也提升了整体稳定性和容错性。本文将介绍三种主流实现方式,并对它们的使用方法、适用场景、优劣进行全面对比。

✅ 判断逻辑简介

在图像维度上:

  • 横屏(Landscape) :宽度 > 高度
  • 竖屏(Portrait) :高度 > 宽度
  • 正方形(Square) :宽度 == 高度

核心思路是获取图片的宽高尺寸,然后比较即可。

📦 方法一:sharp ------ 全能图像处理利器

sharp 是功能最全、最常用的 Node.js 图像处理库,支持获取元数据、裁剪、压缩、格式转换等操作。

安装

复制代码
npm install sharp axios

注:如果处理 URL 图像,还需搭配 axios 获取图片数据。

示例代码

arduino 复制代码
const axios = require('axios');
const sharp = require('sharp');

async function checkOrientationWithSharp(url) {
  const response = await axios.get(url, { responseType: 'arraybuffer' });
  const imageBuffer = Buffer.from(response.data);
  const metadata = await sharp(imageBuffer).metadata();

  const { width, height } = metadata;
  return width > height ? 'landscape' :
         height > width ? 'portrait' : 'square';
}

✅ 优点

  • 支持所有主流和现代格式(WebP、AVIF、HEIC等)

  • 功能强大,可拓展用于更多图像操作

❌ 缺点

  • 安装体积大、构建复杂(依赖 libvips)

  • 性能开销稍大(要解码完整图片)

🪶 方法二:image-size ------ 轻量级本地图像尺寸解析

image-size 是一个小巧的库,用于解析图片的尺寸信息,适用于本地文件或 buffer。

安装

arduino 复制代码
npm install image-size axios

示例代码

arduino 复制代码
const axios = require('axios');
const imageSize = require('image-size');

async function checkOrientationWithImageSize(url) {
  const response = await axios.get(url, { responseType: 'arraybuffer' });
  const dimensions = imageSize(response.data);
  const { width, height } = dimensions;

  return width > height ? 'landscape' :
         height > width ? 'portrait' : 'square';
}

✅ 优点

  • 轻量、安装快速

  • 使用简单,适合基础需求

❌ 缺点

  • 对部分格式支持有限(如 AVIF、HEIC)

  • 需先下载完整图片

⚡ 方法三:probe-image-size ------ 最快的远程图片尺寸探测器

安装

arduino 复制代码
npm install probe-image-size

示例代码

arduino 复制代码
const probe = require('probe-image-size');

async function checkOrientationWithProbe(url) {
  const { width, height } = await probe(url);
  return width > height ? 'landscape' :
         height > width ? 'portrait' : 'square';
}

✅ 优点

  • 无需下载整个图片,效率高

  • 对网络资源优化极佳

  • 支持流式读取

❌ 缺点

  • 格式支持略少于 sharp

  • 不适合处理本地文件(适用于 URL)

🏁 三种方式对比一览表

方法 支持格式 性能 安装复杂度 是否需下载完整图片 适用场景
sharp ✅ 极广(包括 HEIC、AVIF) 中等 ⭐⭐⭐⭐(较复杂) ✅ 需要完整下载 全功能图像处理
image-size ✅ 常见格式(JPG, PNG, GIF) 快速 ⭐⭐(轻量) ✅ 需要完整下载 本地或简单远程判断
probe-image-size ✅ 常见格式(JPG, PNG, GIF) ⭐⭐⭐⭐ 非常快 ⭐(超轻) ❌ 不下载完整图片 高效远程图像判断

🎯 选择建议

你关注的是 推荐方案
格式兼容性广 sharp
安装速度 & 轻量 image-size
网络效率 & 快速加载远程图片 probe-image-size

📌 总结

在 Node.js 中判断图片的横屏或竖屏状态,核心是拿到宽高。根据你的性能、格式兼容性、开发便捷性等需求,可以选择不同的方式。

  • 如果你做的是图片管理后台或压缩服务,**选 sharp**

  • 如果只是判断头像或封面图的方向,**选 probe-image-size 更高效。

  • 如果你需要处理 Buffer 且不想装大型库,**选 image-size**

相关推荐
neon12041 分钟前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy13 分钟前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
妮妮喔妮24 分钟前
Webpack 有哪些特性?构建速度?如何优化?
前端·webpack·node.js
ST.J30 分钟前
webpack笔记
前端·笔记·webpack
Baklib梅梅1 小时前
2025 年 8 个最佳网站内容管理系统(CMS)
前端·ruby on rails·前端框架·ruby
IT_陈寒1 小时前
🔥5个必学的JavaScript性能黑科技:让你的网页速度提升300%!
前端·人工智能·后端
Bling_Bling_11 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子1 小时前
JS实现丝滑文字滚动
前端·javascript·面试
oil欧哟2 小时前
🧐 我用 Vibe Coding 从 0 到 1 打造 AI 产品,上线一个月效果如何?有什么心得?
前端·产品·vibecoding
霍克itxt点top2 小时前
NestJS 入门到实战 前端必学服务端新趋势无密分享
前端