开源在线图片设计器，支持PSD解析AI抠图等，基于Puppeteer生成图片最近挤出时间来完善了这个项目，正式开源后在

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

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

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

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

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

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

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

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

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

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

编辑界面就不多说了，主要说说在保存时，实际是两段JSON内容：

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

后面由于新增了多画板功能，数据结构发生了一些改变：

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

在服务端，我们使用puppeteer启动无头浏览器，在Chrome中打开绘制页，并往其BOM中注入广播通知方法，方法内调用截图，项目的核心就是完成这样的操作闭环。

前端：Vue3、Vite5、VuexPinia、ElementPlus

图片生成：Puppeteer、Express

服务端：Node.js

/src

目前项目还在不断完善中，可能有很多的不足之处，代码写得烂，我也是一边学习一边成长。开源不易，如果项目对你有帮助或启发，可以点个Star支持一下~感谢！