Image Creative Studio

一个基于 Web 的图片编辑工具，接入阿里云 DashScope 图像生成 API，支持多图融合、画布标注编辑等功能。

主要功能

• 多图融合 - 上传多张图片，通过提示词生成融合后的新图
• 画布编辑 - 基于 Fabric.js 的标注工具，支持矩形、圆形、画笔、文字等
• 空白画板 - 从零开始创作，直接在画布上绘制后生成图片
• 批量生成 - 单次请求可生成多张结果图
• 自定义配置 - 支持配置自己的 API Key、模型 ID 和接口地址

运行

# 安装依赖
pnpm install

# 配置环境变量
cp .env.example .env.local
# 编辑 .env.local，填入 DASHSCOPE_API_KEY

# 启动开发服务器
pnpm dev

访问 http://localhost:3000

环境变量

变量名	说明
DASHSCOPE_API_KEY	阿里云 DashScope API Key（获取地址）
RSA_PUBLIC_KEY	RSA 公钥，用于解密 API 请求
RSA_PRIVATE_KEY	RSA 私钥，用于加密 API 请求

也可以在页面右上角的设置里配置自定义的 API Key。

技术栈

类型	选型
框架	Next.js 16 (Pages Router)
UI	Ant Design 5 + TailwindCSS
Canvas	Fabric.js 7
语言	TypeScript

目录结构

src/
├── components/        # 页面组件
│   ├── ImageWorkspace.tsx    # 主工作区
│   ├── ImageEditorModal.tsx  # 图片编辑弹窗
│   └── common/               # 通用组件
├── hooks/             # 自定义 Hooks
│   ├── useCanvasDrawing.ts   # Canvas 绑定逻辑
│   └── useImageGenerator.ts  # 图片生成逻辑
├── pages/
│   ├── api/           # API Routes
│   │   └── generate.ts       # 调用 DashScope API
│   └── index.tsx      # 首页
├── services/ai/       # AI Provider 抽象层
└── lib/               # 工具函数（限流、加密等）

部署

pnpm build
pnpm start

License

本项目采用 MIT 许可证 - 详情请参阅 LICENSE 文件。