Fabric.js Image Editor

一个基于 Vue 3 + Fabric.js 的图片编辑器，提供基础的图片编辑功能。

技术栈

• Vue 3
• TypeScript
• Vite
• Fabric.js

功能特性

画布操作

• 自定义画布尺寸（宽度 x 高度）
• 自定义背景颜色
• 画布状态保持（调整大小时保持内容）

图片操作

• 图片上传
• 图片移动
• 图片缩放
• 图片旋转
• 一键居中
• 删除图片
• 导出保存

界面特点

• 现代化 UI 设计
• 渐变色按钮
• 响应式布局
• 直观的操作控件
• 实时预览

安装和运行

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

使用说明

1. 画布设置

   • 输入宽度和高度数值
   • 点击"应用尺寸"更新画布
   • 使用颜色选择器更改背景色

2. 图片操作

   • 点击"选择图片"上传图片
   • 拖拽图片进行移动
   • 使用控制点进行缩放
   • 点击"居中"将图片居中显示
   • 点击"删除"移除选中图片
   • 点击"保存"导出编辑后的图片

项目结构

src/
├── components/
│   └── ImageEditor.vue    # 主要的编辑器组件
├── App.vue                # 应用入口组件
├── main.ts               # 应用入口文件
└── vite-env.d.ts        # TypeScript 声明文件

开发说明

主要依赖

• fabric: ^5.x.x
• vue: ^3.x.x
• typescript: ^5.x.x
• vite: ^6.x.x

关键实现

• 使用 Fabric.js Canvas 实现图片编辑功能
• 使用 Vue 3 Composition API 管理状态
• 使用 TypeScript 确保类型安全
• 使用 Vite 提供快速的开发体验

注意事项

1. 图片编辑操作都是非破坏性的，原图不会被修改
2. 导出的图片为 PNG 格式，保持最高质量
3. 建议使用现代浏览器以获得最佳体验

后续优化方向

1. 添加更多图片编辑功能（滤镜、裁剪等）
2. 添加撤销/重做功能
3. 优化大图片处理性能
4. 添加快捷键支持
5. 添加更多导出格式选项

License

MIT