开源在线图片编辑器，支持PSD解析、AI抠图等，基于Puppeteer生成图片

自从我上次分享一个人开发仿造稿定设计的图片编辑器到现在，不知不觉已过去一年时间了，期间我经历了裁员失业、面试找工作碰壁，寒冬下一直没有很好地履行计划…..这些就放在日后谈吧。

最近挤出时间来完善了这个项目，正式开源后在一天内就收获了上百个Star，今天想向大家分享下这个开源图片编辑器项目——迅排设计，以及我的一些感悟和开源体验。

在线 Demo | 文档网站 | Github 开源地址: palxiao/poster-design

项目速览

git clone https://github.com/palxiao/poster-design.git
cd poster-design
npm run prepared  # 快捷安装依赖指令
npm run serve     # 本地运行

将同时运行前端界面与图片生成服务(3000与7001端口)，合成图片时本地会启动一个Chrome浏览器实例。

👇🏻下面一起来看下都有些什么功能吧。

上传 PSD 模板

点击 “我的” - “资源管理”，上传PSD模板按钮，进入PSD解析上传界面界面。选择或拖入 PSD 文件，等待解析完成后开始编辑，调整好模板后点击右上角“上传模板”，等待完成。

上传完成后点击查看作品即可打开模板，之后在 “我的作品” 中可以找到该模板。

线上为功能测试，资源将被上传到 Github，这在某些网络条件下可能会体验不佳，请确认你的网络环境，必要时科学上网。

由于服务器在国内，生成下载图片可能会图裂，这不是BUG。

AI 抠图

上传需要去除背景的图片，自动抠除背景。在线体验

以上在线体验效果Demo所分配的服务器资源仅1核1G内存，可以看到应付简单抠图场景还是不错的，后续我会另开一篇文章介绍如何部署，感兴趣的话提前关注不迷路~

编辑与设计

快捷键

保存：Ctrl / Command + S
复制（选中元素）：Ctrl / Command + C
粘贴：Ctrl / Command + V
多选：按住 Shift 或 Ctrl / Command 然后鼠标点选
组合成组（多选时）：Ctrl / Command + G

文字

画布中双击内容，编辑文字，修改颜色，原生吸色器（Chrome）：

图片

除了拖拽缩放图片大小，也可对图像内容进行缩放裁剪，裁剪通常用于截取显示原图像的一部分：

支持拖动图片放置到一个容器中显示：

图层

图层面板中可随意拖动元素快速改变层级，图层锁定后将固定在画布中，此时元素变得不可移动，再次点击按钮即可解锁：

标尺

从标尺栏中拖出辅助线，按住线段拖回标尺栏中删除辅助线

项目架构

编辑界面就不多说了，就是对着稿定设计来，主要说说在保存时的操作，实际保存的是两段JSON内容：

其中 Page 是整个页面的 Schema，而 Widgets 则是扁平化的数组，代表着整个页面中的元素集合，拍平是为了高效直观地实现层级以及查找组件。

保存这些 JSON 后，在绘制页面请求这些信息，然后将页面呈现出来，绘制页移除了画布操作、属性菜单面板等编辑页才有的功能，只保留了基础组件的引入（如果有充足开发成本理论上可尝试采用 SSR 进一步提升速度），并通过一系列方法判断字体、图片、SVG等元素是否加载完毕，一旦整个页面以及资源都加载完成则调用 window 下的广播通知开始截图。

在服务端，我们使用 puppeteer 启动无头浏览器，在 Chrome 中打开绘制页，并往其 BOM 中注入广播通知方法，这样就完成了整个图片生成操作的闭环。

技术栈概括

前端：Vue3 、Vite2 、Vuex 、ElementPlus

图片生成：Puppeteer、Express

服务端：Node.js

一些可独立的功能会被抽取出来作为单独的库引入使用。

组件库 Github 地址：front-end-arsenal | 组件文档网站

前端目录详解

/src

├── App.vue
├── api // 请求接口管理
├── assets
|  ├── data // 数据资源
|  ├── fonts // 本地字体资源
|  └── styles // CSS 样式文件
├── common // 存放一些公共方法，例如上传下载、弹窗提示等
|  ├── hooks
|  └── methods
├── components
|  ├── business // 放置业务组件
|  |  ├── cropper // 裁剪（暂时弃用）
|  |  ├── image-cutout // 抠图
|  |  ├── moveable // 操作插件
|  |  ├── picture-selector // 照片库弹窗选择
|  |  ├── qrcode // 二维码插件
|  |  ├── right-click-menu // 右键菜单
|  |  └── save-download // 保存下载弹窗
|  ├── common // 公共组件
|  |  ├── PopoverTip.vue // 气泡提示组件
|  |  ├── ProgressLoading // 百分比进度条
|  |  └── Uploader // 上传组件
|  └── modules // 核心模块
|     ├── index.ts
|     ├── layout
|     |  ├── designBoard.vue // 主界面
|     |  ├── lineGuides.vue // 网格（弃用，由moveable提供辅助线功能）
|     |  ├── sizeControl.vue // 元素操作组件（弃用，由moveable代理）
|     |  └── zoomControl.vue // 缩放画布
|     ├── panel // 该目录下的所有文件自动导入项目中
|     |  ├── components
|     |  ├── stylePanel.vue // 右侧属性编辑面板
|     |  ├── widgetPanel.vue // 左侧功能菜单面板
|     |  └── wrap
|     |     ├── BgImgListWrap.vue // 背景选择面板
|     |     ├── PhotoListWrap.vue // 照片面板
|     |     ├── TempListWrap.vue // 模板列表
|     |     ├── ToolsListWrap.vue // 工具面板
|     |     ├── UserWrap.vue // 我的资源作品面板
|     |     ├── GraphListWrap.vue // 素材面板
|     |     ├── CompListWrap.vue // 组合列表（目前主要是文字组合）
|     |     └── TextListWrap.vue // 文字面板
|     ├── settings // 放置操作面板下的一些组件
|     |  ├── EffectSelect // 效果选择（未开发）
|     |  ├── colorSelect.vue // 颜色选择
|     |  ├── iconItemSelect.vue // icon选择
|     |  ├── numberInput.vue // 数字输入
|     |  ├── numberSlider.vue // 数字拖拉
|     |  ├── textInput.vue // 文字输入
|     |  ├── textInputArea.vue // 文字域输入
|     |  └── valueSelect.vue // 下拉选择
|     └── widgets // 该目录下的所有文件自动导入项目中
|        ├── pageStyle.vue // 背景/页面设置
|        ├── wGroup // 组合
|        |  ├── wGroup.vue
|        |  └── wGroupStyle.vue // 对应右侧面板的操作
|        ├── wImage // 图片
|        |  ├── components
|        |  |  └── innerToolBar.vue
|        |  ├── wImage.vue
|        |  └── wImageStyle.vue // 对应右侧面板的操作
|        ├── wQrcode // 二维码
|        |  ├── wQrcode.vue
|        |  └── wQrcodeStyle.vue // 对应右侧面板的操作
|        ├── wSvg // 矢量图
|        |  ├── wSvg.vue
|        |  └── wSvgStyle.vue // 对应右侧面板的操作
|        └── wText // 文字
|           ├── wText.vue
|           └── wTextStyle.vue // 对应右侧面板的操作
├── config.ts // 公共配置
├── main.ts // 项目入口文件
├── mixins // 一些公共混合代码，考虑优化
|  ├── methods
|  |  ├── DealWithCtrl.ts
|  |  └── keyCodeOptions.ts
|  ├── mouseDragging.ts
|  ├── move.ts
|  └── shortcuts.ts
├── router // vue 路由
|  ├── .....
├── store // Vuex 状态管理器
|  ├── index.ts
|  └── modules
|     ├── base
|     |  ├── .......
|     └── design
|        ├── .......
├── types // TS类型配置
|  ├── .......
├── utils // 工具函数目录
|  ├── axios.ts
|  ├── index.ts
|  ├── plugins
|  |  ├── cssLoader.ts // 异步加载css
|  |  ├── modules.ts // 全局加载公共组件
|  |  ├── pointImg.ts // 图片点位颜色，测试中
|  |  ├── preload.ts // 加载资源
|  |  └── psd // 设计稿解析
|  ├── utils.ts
|  └── widgets
|     └── elementConfig.ts // 配置全局默认导入的element组件
└── views // 页面目录
   ├── Draw.vue // 绘制页
   ├── Index.vue // 编辑页（首页）
   ├── Psd.vue // PSD解析页
   └── components