EXIF 图片数据解析工具

一个基于 React + TypeScript + Node.js 的 EXIF 图片数据解析工具，使用 exiftool-vendored 提供强大的图片元数据解析功能。

功能特性

• 📸 支持拖拽上传和点击上传图片
• 🔍 解析图片的完整 EXIF 数据
• 📊 分类显示重要信息（相机信息、拍摄参数、GPS 信息等）
• 🌙 现代化的暗色主题界面
• 📱 响应式设计，支持移动端
• 🚀 基于 Vite 的快速开发体验

技术栈

• 前端: React 18 + TypeScript + Vite + Ant Design
• 后端: Node.js + Express + exiftool-vendored
• 包管理: pnpm

系统要求

1. Node.js >= 16.0.0
2. pnpm >= 7.0.0
3. ExifTool - 需要单独安装

安装 ExifTool

macOS (使用 Homebrew):

brew install exiftool

Windows:

1. 从 ExifTool 官网 下载
2. 解压到系统 PATH 目录中

Linux (Ubuntu/Debian):

sudo apt-get install libimage-exiftool-perl

快速开始

1. 克隆项目并安装依赖

# 安装前端依赖
pnpm install

# 安装后端依赖
cd server
pnpm install
cd ..

2. 启动开发服务器

# 启动后端服务器（端口 3001）
cd server
pnpm dev

# 新开一个终端，启动前端开发服务器（端口 3000）
cd ..
pnpm dev

3. 访问应用

打开浏览器访问 http://localhost:3000

项目结构

exif解析/
├── src/                    # 前端源码
│   ├── components/         # React 组件
│   │   └── ExifParser.tsx  # EXIF 解析组件
│   ├── App.tsx            # 主应用组件
│   ├── main.tsx           # 应用入口
│   └── index.css          # 样式文件
├── server/                # 后端源码
│   ├── server.js          # Express 服务器
│   └── package.json       # 后端依赖
├── public/                # 静态资源
├── package.json           # 前端依赖
├── vite.config.ts         # Vite 配置
├── tsconfig.json          # TypeScript 配置
└── README.md              # 项目说明

API 接口

POST /api/parse-exif

上传图片并解析 EXIF 数据

请求参数:

• image: 图片文件 (multipart/form-data)

响应格式:

{
  "success": true,
  "filename": "example.jpg",
  "exifData": {
    "Make": "Canon",
    "Model": "EOS R5",
    "ISO": 100,
    "FNumber": 2.8,
    ...
  }
}

GET /api/health

健康检查接口

支持的图片格式

• JPEG / JPG
• PNG
• TIFF
• GIF
• BMP
• WebP

开发说明

前端开发

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产版本
pnpm preview

# 代码检查
pnpm lint

后端开发

cd server

# 启动开发服务器（带热重载）
pnpm dev

# 启动生产服务器
pnpm start

常见问题

1. ExifTool 未找到错误

确保已正确安装 ExifTool 并且在系统 PATH 中可访问：

# 检查 ExifTool 是否安装成功
exiftool -ver

2. 端口冲突

如果端口被占用，可以修改配置：

• 前端：修改 vite.config.ts 中的 server.port
• 后端：设置环境变量 PORT=3002 或修改 server/server.js

3. CORS 错误

确保后端服务器正在运行，前端会访问 http://localhost:3002 的 API。

测试 API

使用 curl 测试上传功能

# 下载测试图片
curl -o test.jpg "https://sample-videos.com/zip/10/jpg/SampleJPGImage_1mbmb.jpg"

# 测试 EXIF 解析 API
curl -X POST http://localhost:3002/api/parse-exif \
  -F "image=@test.jpg" \
  -H "Content-Type: multipart/form-data"

# 或者使用您本地的图片文件
curl -X POST http://localhost:3002/api/parse-exif \
  -F "image=@/path/to/your/image.jpg" \
  -H "Content-Type: multipart/form-data"

健康检查

curl http://localhost:3002/api/health

贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

许可证

MIT License

联系方式

如有问题或建议，请创建 Issue 或联系开发者。