# cover-image

**Repository Path**: maple2133/cover-image

## Basic Information

- **Project Name**: cover-image
- **Description**: 封面制作工具
- **Primary Language**: Unknown
- **License**: MPL-2.0
- **Default Branch**: master
- **Homepage**: http://cover-image.maple.ink
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-08-29
- **Last Updated**: 2025-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 个人产品

## README

# CoverImage - 封面制作工具

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Vue.js](https://img.shields.io/badge/Vue.js-3.5.13-4FC08D.svg)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.6.2-3178C6.svg)](https://www.typescriptlang.org/)
[![Tauri](https://img.shields.io/badge/Tauri-2.x-FFC131.svg)](https://tauri.app/)

## 📖 项目简介

CoverImage 是一个基于 Tauri + Vue + TypeScript 开发的现代化封面制作工具。它提供了直观的图形界面，支持多图层编辑、实时预览和高质量图片导出，是创作者制作封面、海报和设计作品的理想选择。

## ✨ 主要特性

### 🎨 图片编辑功能
- **多比例支持**: 2.35:1、16:9、4:3、3:2、3:4、9:16 等常用比例
- **双图层系统**: 支持主图层和底图层的独立编辑
- **智能布局**: 底图自动右下角对齐，主图灵活定位
- **实时预览**: 所见即所得的编辑体验

### 🖼️ 图片框组件
- **可拖拽移动**: 支持图片框的自由拖拽定位
- **8个缩放手柄**: 四边不固定比例缩放，四角固定比例缩放
- **超出边界编辑**: 允许图片框超出画布边界进行编辑
- **自适应尺寸**: 根据图片真实宽高比自动计算框架尺寸

### 📤 导出功能
- **高质量导出**: 基于 Canvas API 的 2000px 基础尺寸导出
- **透明融合**: 支持多图层透明叠加和融合效果
- **精确裁剪**: 只导出画布可视区域内的图片内容
- **一键下载**: 自动生成文件名并下载到本地

### 🎯 用户体验
- **拖拽上传**: 支持直接拖拽图片到画布进行上传
- **响应式设计**: 适配桌面和移动设备
- **动画效果**: 平滑的过渡动画和悬停效果
- **现代UI**: 渐变背景和磨砂玻璃效果

## 🛠️ 技术栈

### 前端技术
- **Vue 3.5.13**: 使用 Composition API 和 `<script setup>` 语法
- **TypeScript 5.6.2**: 提供类型安全和更好的开发体验
- **Vite 6.0.1**: 快速的构建工具和热重载开发服务器

### 桌面端
- **Tauri 2.x**: 基于 Rust 的轻量级桌面应用框架
- **Rust**: 高性能的系统级编程语言后端支持

### 核心API
- **Canvas API**: 用于高质量图片渲染和导出
- **Drag & Drop API**: 实现拖拽上传和移动功能
- **File API**: 处理本地文件上传和读取

## 🚀 快速开始

### 环境要求
- Node.js 18.x 或更高版本
- npm (随 Node.js 自动安装)
- Rust 工具链 (rustup, cargo)
- Tauri CLI

### 安装依赖
```bash
# 安装前端依赖
npm install

# 安装 Tauri CLI (如果尚未安装)
npm install -g @tauri-apps/cli@^2
```

### 开发模式
```bash
# 启动 Web 开发服务器
npm run dev

# 启动 Tauri 桌面应用
npm run tauri dev
```

### 构建打包
```bash
# 构建 Web 版本
npm run build

# 构建桌面应用
npm run tauri build
```

## 🏗️ 项目结构

```
cover-image/
├── src/
│   ├── components/           # Vue 组件
│   │   └── ResizableImageFrame.vue  # 可调整大小的图片框组件
│   ├── home.vue             # 主页面组件
│   └── main.ts              # 应用入口
├── src-tauri/               # Tauri 后端代码
├── public/                  # 静态资源
├── dist/                    # 构建输出
└── README.md               # 项目说明
```

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

### 开发规范
- 使用 TypeScript 严格模式
- 遵循 Vue 3 Composition API 最佳实践
- 保持代码风格一致性
- 添加必要的类型定义

## 📄 许可证

MIT License

## 👨‍💻 作者

**李剑一** - [https://www.maple.ink](https://www.maple.ink)

🔗 快速体验地址：[https://cover-image.maple.ink](http://cover-image.maple.ink)

---

⭐ 如果这个项目对您有帮助，请给它一个星标！

## 🔧 IDE 推荐配置

- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)