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