一个基于Next.js开发的图片OCR工具，可以快速从各种图片中提取文字内容。本项目采用现代化的技术栈，提供流畅的用户体验和高效的文字识别功能。
点击下面的按钮一键部署到Vercel：
注意：部署时需要在Vercel中配置环境变量
API_BASE_URL，指向你的API服务器地址。
- 🖼️ 支持多种图片格式的文字识别
- 🚀 基于Next.js 15.2构建，性能优异
- 💅 使用Tailwind CSS和shadcn/ui构建的现代化UI
- 📱 响应式设计，支持移动端和桌面端
- 🔍 支持图片预览和OCR结果展示
- 🎯 精准的文字识别结果
主界面支持拖拽上传或点击选择文件，支持PNG、JPG等常见图片格式。上传后会自动进行OCR识别并展示结果，适用于各类图片的文字提取需求。界面简洁直观，操作便捷。
- Node.js 18.0.0 或更高版本
- npm 9.0.0 或更高版本
在项目根目录创建 .env 文件，添加以下配置：
# API服务器地址，默认为http://localhost:5000
API_BASE_URL=http://localhost:5000- 克隆项目到本地：
git clone https://github.com/your-username/wx-ocr-demo.git
cd wx-ocr-demo- 安装依赖：
npm install- 启动开发服务器：
npm run dev- 在浏览器中打开 http://localhost:3000 查看效果
- 创建生产环境配置文件
.env.production：
API_BASE_URL=https://your-api-server.com- 执行以下命令构建生产环境版本：
npm run build- 启动生产环境服务器：
npm run start项目支持使用Docker进行部署，提供了以下两种方式：
- 启动生产环境：
docker-compose up -d app- 启动开发环境：
docker-compose up dev- 构建Docker镜像：
docker build -t wx-ocr-demo .- 运行容器：
docker run -d -p 3000:3000 wx-ocr-demo应用将在 http://localhost:3000 上运行。
- Next.js - React框架
- Tailwind CSS - CSS框架
- shadcn/ui - UI组件库
- Radix UI - 无障碍UI原语
- next-intl - 国际化支持
本项目的OCR识别功能基于swigger/wechat-ocr项目实现。该项目提供了高效、准确的OCR文字识别能力，能够快速从图片中提取文字内容。通过集成该项目的OCR能力，我们实现了一个现代化的Web界面，让用户可以方便地使用这一强大的文字识别功能。
├── public/ # 静态资源
├── src/
│ ├── app/ # 页面组件
│ ├── components/ # 通用组件
│ ├── config/ # 配置文件
│ └── lib/ # 工具函数
└── ...配置文件
- Fork 本仓库
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 提交 Pull Request
This tool is for personal use only. Please ensure you have the necessary rights to process the images.