一、开源项目简介

Leafer Design

Leafer Design 是一个免费开源的海报设计器。使用了最新的vue3,vite4,TypeScript等主流技术开发，开箱即用。

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

一款漂亮易用的在线设计器，支持PSD导入、PSD解析，可用于海报设计器、广告设计器、logo设计器、AI创作图片合成器等。常用于生成二维码海报，图片海报，二维码推广海报，图片处理，名片设计，电商产品图，节假日海报等。

功能/计划

Tips: 🕙筹划中 🔲筹备中 🚧进行中 ✅已完成

• ✅ PSD导入

• ✅ 普通文本

• ✅ 富文本

• 🚧 效果/特效处理

• ✅ 单层蒙版

• 🔲 连续多层蒙版

• ✅ 支持RGB色彩模式的PSD文件导入

• 🕙 支持CMYK色彩模式的PSD文件导入及色彩模式转换

• ✅ 分组处理

• ✅ 层级处理

• ✅ 图片解析

• ✅ 剪切蒙版

• ✅ 文字解析

• ✅ 字体加载

• 🕙 智能对象

• ✅ JSON导入

• ✅ 多页面支持

• ✅ 快捷键支持（部分功能）

• ✅ 模板导入

• ✅ 图层管理

• ✅ 标尺工具

• ✅ 钢笔工具

• ✅ 默认画笔样式

• 🚧 自定义画笔样式

• ✅ 元素编辑

• ✅ 预览

• ✅ 文件下载（JSON / PNG / JPG / WEBP）

• ✅ 整个画布导出

• ✅ 指定元素导出

• ✅ 画布缩放、拖动模式

• ✅ 边框描边（纯色、线性渐变、径向渐变、图片）

• ✅ 填充（纯色、线性渐变、径向渐变、图片）

• ✅ 混合模式、旋转、透明度

• ✅ 文本字体、粗细、大小、下划线、中划线、倾斜、行距、字距、内边距、换行规则

• ✅ 文本超出控制、自定义超出显示

• ✅ 多元素打组、拆分组

• ✅ 画布尺寸修改、多背景填充

• ✅ 元素超出组裁剪/显示

• ✅ 富文本支持

• 🔲 跨组拖拽（拖入、拖出）

• 🔲 遮罩功能

• 🔲 组内蒙版

• 🔲 组内擦除功能

• 🔲 外阴影、内阴影

• 🚧 撤销、恢复功能

• 🔲 图片裁剪

• 🔲 图片滤镜

• 🕙 SDK封装

• 🚧 PSD导入插件化封装

• 🕙 针对标尺线、元素的自动吸附功能

• ✅ 二维码工具

• ✅ 条形码码工具

• 🕙 AI抠图

• 🕙 AI图生图、自动补全

• ✅ 标尺线npm包封装

五、技术选型

安装使用

• 获取项目代码

访问一飞开源：https://code.exmay.com/ 下载

• 安装依赖

cd gzm-design

pnpm install

• 运行

pnpm dev

• 打包

pnpm build

致谢

特别感谢以下项目和贡献者：

• liumingye/fabric 一款基于fabirc的高性能编辑器。

• poster-design 一款基于dom的在线海报图片设计器。

• vue-fabric-editor 一款基于fabric.js和Vue的图片编辑器。

• free-font 可商用免费字体收录汇总