ℹ️ 图片信息及属性
基本属性
- 格式类型：JPEG、PNG、GIF、WEBP、BMP、TIFF等
- 文件大小：以KB、MB等为单位的存储空间占用
- 创建/修改日期：文件的元数据时间戳
视觉属性
-
尺寸/分辨率
- 宽度（像素）
- 高度（像素）
- PPI/DPI（每英寸像素数，影响打印质量）
-
色彩属性
- 色彩模式：RGB、CMYK、灰度等
- 色深/位深：8位、16位、24位等
- 透明度（Alpha通道）：PNG支持，JPEG不支持
-
质量属性
- 压缩率（JPEG等有损格式）
- 噪点/伪影程度
元数据
EXIF/标准元数据
EXIF（Exchangeable Image File Format，可交换图像文件格式）是嵌入在图片文件中的元数据，主要记录拍摄参数、设备信息、时间、位置等数据。以下是常见 EXIF 信息分类：
✅一、拍摄参数类
| 属性 | 含义 |
|---|---|
ExposureTime | 曝光时间（如 1/60 秒） |
FNumber | 光圈值（如 f/2.8） |
ISOSpeedRatings | ISO 感光度（如 100、400） |
FocalLength | 焦距（如 35mm） |
Flash | 是否使用闪光灯 |
MeteringMode | 测光模式 |
WhiteBalance | 白平衡设置 |
✅ 二、时间与位置
| 属性 | 含义 |
|---|---|
DateTimeOriginal | 拍摄时间 |
CreateDate | 文件创建时间（不一定等于拍摄） |
GPSLatitude | GPS 纬度（如有） |
GPSLongitude | GPS 经度（如有） |
GPSAltitude | 海拔 |
✅ 三、设备信息
| 属性 | 含义 |
|---|---|
Make | 相机/手机制造商（如 Apple） |
Model | 设备型号（如 iPhone 14） |
LensModel | 镜头型号（如 EF 50mm） |
Software | 拍摄时使用的软件版本 |
✅ 四、图片属性
| 属性 | 含义 |
|---|---|
ImageWidth | 图片宽度 |
ImageHeight | 图片高度 |
Orientation | 拍摄方向（横竖） |
ColorSpace | 色彩空间（sRGB 等） |
Compression | 压缩方式 |
Thumbnail | 缩略图数据（如有） |
ICC/色彩管理的核心
ICC（International Color Consortium，国际色彩联盟）元数据是嵌入在图像文件中的色彩管理数据，用于确保不同设备（相机、显示器、打印机）呈现的色彩一致性。
XMP/图像的可扩展元数据
XMP（Extensible Metadata Platform，可扩展元数据平台）是 Adobe 开发的一种标准化元数据格式，用于嵌入到图片、视频、PDF 等文件中。它比 EXIF 更灵活，支持自定义字段和结构化数据。
对比
📌 XMP vs EXIF vs ICC
| 特性 | XMP | EXIF | ICC |
|---|---|---|---|
| 格式 | XML 文本 | 二进制数据 | 二进制配置文件 |
| 扩展性 | ⭐⭐⭐⭐（可自定义） | ⭐⭐（固定字段） | ⭐（固定色彩模型） |
| 主要用途 | 编辑元数据、版权 | 相机参数、时间 | 色彩管理 |
| 编辑工具 | Photoshop、ExifTool | 相机、ExifTool | Photoshop、ColorSync |
📖 用代码读取图片属性
sharp.js 提供 metadata 方法用于读取图片的信息（详见官网文档）。sharp 本身不能直接读取到 EXIF 信息（返回的是 Buffer 对象），需要专门的工具进行解析，如ExifReader、exifr、exif-parser、exif-js。
四个常用库对比图（截止2025年6月）
| 特性 / 库 | ExifReader | exifr | exif-parser | exif-js |
|---|---|---|---|---|
| ✅ 解析精度 | ⭐⭐⭐⭐ 高（专业级） | ⭐⭐⭐⭐ 高 | ⭐⭐ 中等（基础字段） | ⭐⭐ 中等（部分支持） |
| 📦 支持格式 | JPEG, TIFF, WebP 等 | JPEG, HEIC, TIFF, WebP | JPEG | JPEG |
| 🌐 平台支持 | 浏览器 + Node.js | 浏览器 + Node.js | Node.js（专用） | 浏览器专用 |
| 🛠 支持 GPS / IPTC | ✅ | ✅ | ❌（无 GPS/IPTC） | ✅（部分支持） |
| 🧱 输出结构化对象 | ✅ | ✅（字段清晰） | ❌（手动解析） | ❌（字段杂乱） |
| ⚡ 性能 | ⭐⭐⭐ 中等 | ⭐⭐⭐⭐ 快 | ⭐⭐⭐⭐ 快（轻量） | ⭐⭐ 慢（同步） |
| 📅 更新活跃 | ✅（持续更新） | ✅（活跃） | ⚠ 停止维护（多年） | ❌（基本弃用） |
| 📦 包体积 | 中 | 小（~20KB） | 非常小（~6KB） | 小 |
在项目中我选用exifr库。
元数据展示/VUE
<template>
<n-scrollbar :style="{ maxHeight: height }">
<n-table size="small" :bordered="false" striped>
<thead>
<tr>
<th width="200px">属性名</th>
<th>值</th>
</tr>
</thead>
<tbody>
<tr v-for="(value, key) in data">
<td>
<n-tooltip>
<template #trigger>{{ key }}</template>
{{ getCNName(key) }}
</n-tooltip>
</td>
<td>{{ value }}</td>
</tr>
</tbody>
</n-table>
</n-scrollbar>
</template>
<script setup>
import { NTable, NTooltip, NScrollbar } from 'naive-ui'
const props = defineProps({
data:{type:Object},
height:{type: String, default: "500px" }
})
const cnNames = (()=>{
const names = {
CompositeImage : "合成图像",
OffsetTimeOriginal: "拍摄原始日期时区",
OffsetTimeDigitized: "拍摄原始日期时区",
FocalLenIn35mmFilm:"描述数码相机或镜头在模拟35mm胶片时的焦距效果",
PhotographicSensitivity:"相机灵敏度",
LensMake:"镜头制造商",
LensSpecification: "镜头规格",
ISO: "感光度设置",
ExposureCompensation:"曝光补偿",
FocalLengthIn35mmFormat: "镜头焦距在35mm全画幅相机上的等效值",
LensInfo: "镜头信息",
OffsetTime: "时区偏移量",
"ExifVersion": "Exif 版本",
"FlashPixVersion": "FlashPix 版本",
"ColorSpace": "色域、色彩空间",
"PixelXDimension": "图像的有效宽度",
"PixelYDimension": "图像的有效高度",
"ComponentsConfiguration": "图像构造",
"CompressedBitsPerPixel": "压缩时每像素色彩位",
"MakerNote": "制造商设置的信息",
"UserComment": "用户评论",
"RelatedSoundFile": "关联的声音文件",
"DateTimeOriginal": "创建时间",
"DateTimeDigitized": "数字化创建时间",
"SubsecTime": "日期时间（秒）",
"SubSecTimeOriginal": "原始日期时间（秒）",
"SubsecTimeDigitized": "原始日期时间数字化（秒）",
"ExposureTime": "曝光时间",
"FNumber": "光圈值",
"ExposureProgram": "曝光程序",
"SpectralSensitivity": "光谱灵敏度",
"ISOSpeedRatings": "感光度",
"OECF": "光电转换功能",
"ShutterSpeedValue": "快门速度",
"ApertureValue": "镜头光圈",
"BrightnessValue": "亮度",
"ExposureBiasValue": "曝光补偿",
"MaxApertureValue": "最大光圈",
"SubjectDistance": "物距",
"MeteringMode": "测光方式",
"Lightsource": "光源",
"Flash": "闪光灯",
"SubjectArea": "主体区域",
"FocalLength": "焦距",
"FlashEnergy": "闪光灯强度",
"SpatialFrequencyResponse": "空间频率反应",
"FocalPlaneXResolution": "焦距平面X轴解析度",
"FocalPlaneYResolution": "焦距平面Y轴解析度",
"FocalPlaneResolutionUnit": "焦距平面解析度单位",
"SubjectLocation": "主体位置",
"ExposureIndex": "曝光指数",
"SensingMethod": "图像传感器类型",
"FileSource": "源文件",
"SceneType": "场景类型（1 == 直接拍摄）",
"CFAPattern": "CFA 模式",
"CustomRendered": "自定义图像处理",
"ExposureMode": "曝光模式",
"WhiteBalance": "白平衡（1 == 自动，2 == 手动）",
"DigitalZoomRation": "数字变焦",
"FocalLengthIn35mmFilm": "35毫米胶片焦距",
"SceneCaptureType": "场景拍摄类型",
"GainControl": "场景控制",
"Contrast": "对比度",
"Saturation": "饱和度",
"Sharpness": "锐度",
"DeviceSettingDescription": "设备设定描述",
"SubjectDistanceRange": "主体距离范围",
"InteroperabilityIFDPointer": "",
"ImageUniqueID": "图像唯一ID",
"ImageWidth": "图像宽度",
"ExifImageWidth" : "图像宽度",
"ImageHeight": "图像高度",
"ExifImageHeight": "图像高度",
"BitsPerSample": "比特采样率",
"Compression": "压缩方法",
"PhotometricInterpretation": "像素合成",
"Orientation": "拍摄方向",
"SamplesPerPixel": "像素数",
"PlanarConfiguration": "数据排列",
"YCbCrSubSampling": "色相抽样比率",
"YCbCrPositioning": "色相配置",
"XResolution": "X方向分辨率",
"YResolution": "Y方向分辨率",
"ResolutionUnit": "分辨率单位",
"StripOffsets": "图像资料位置",
"RowsPerStrip": "每带行数",
"StripByteCounts": "每压缩带比特数",
"JPEGInterchangeFormat": "JPEG SOI 偏移量",
"JPEGInterchangeFormatLength": "JPEG 比特数",
"TransferFunction": "转移功能",
"WhitePoint": "白点色度",
"PrimaryChromaticities": "主要色度",
"YCbCrCoefficients": "颜色空间转换矩阵系数",
"ReferenceBlackWhite": "黑白参照值",
"DateTime": "日期和时间",
"ImageDescription": "图像描述、来源",
"Make": "相机/手机制造商（如 Apple）",
"Model": "设备型号",
"Software": "拍摄时使用的软件（手机系统）版本",
"Artist": "作者",
"Copyright": "版权信息",
"GPSVersionID": "GPS 版本",
"GPSLatitudeRef": "南北纬",
"GPSLatitude": "纬度",
"GPSLongitudeRef": "东西经",
"GPSLongitude": "经度",
"GPSAltitudeRef": "海拔参照值",
"GPSAltitude": "海拔",
"GPSTimeStamp": "GPS 时间戳",
"GPSSatellites": "测量的卫星",
"GPSStatus": "接收器状态",
"GPSMeasureMode": "测量模式",
"GPSDOP": "测量精度",
"GPSSpeedRef": "速度单位",
"GPSSpeed": "GPS 接收器速度",
"GPSTrackRef": "移动方位参照",
"GPSTrack": "移动方位",
"GPSImgDirectionRef": "图像方位参照",
"GPSImgDirection": "图像方位",
"GPSMapDatum": "地理测量资料",
"GPSDestLatitudeRef": "目标纬度参照",
"GPSDestLatitude": "目标纬度",
"GPSDestLongitudeRef": "目标经度参照",
"GPSDestLongitude": "目标经度",
"GPSDestBearingRef": "目标方位参照",
"GPSDestBearing": "目标方位",
"GPSDestDistanceRef": "目标距离参照",
"GPSDestDistance": "目标距离",
"GPSProcessingMethod": "GPS 处理方法名",
"GPSAreaInformation": "GPS 区功能变数名",
"GPSDateStamp": "GPS 日期",
"GPSDifferential": "GPS 修正"
}
return Object.fromEntries(Object.keys(names).map(key=>[key.toLowerCase(), names[key]]))
})();
const getCNName = (key="")=> cnNames[key.toLowerCase()] || key
</script>
效果演示
✍️ 修改图片属性（规划ING）
未来有需要再加上（可以通过 sharp.js 写入 metadata ）😄。
