回顾过去的一年，自从我上次分享过一个人独立开发模拟稿定设计的图片编辑器之后，时间飞逝。这一年间，我经历了职场的起伏，包括公司的裁员导致失业，以及求职过程中遭遇的种种挫折。在严酷的就业环境下，我未能如期推进原定的计划……这些曲折的故事，我们稍后再详细探讨。
近期，我利用业余时间对之前的图片编辑器项目进行了全面的优化，并在正式开源后，仅仅一天之内就获得了超过一百个Star的支持。今天，我非常荣幸地想与大家分享这个开源的图片编辑器项目——迅排设计，同时也会分享一些我在开源过程中的心得体会。
该项目的前端界面与图片生成服务将分别运行在3000和7001端口上，当需要进行图片合成时，系统会在本地自动启动一个Chrome浏览器实例。
接下来，让我们一起探索这个项目的丰富功能。
首先，在“我的”菜单中选择“资源管理”，点击“上传PSD模板”按钮，你将进入PSD解析上传界面[4]。在这里，你可以选择或拖拽PSD文件，等待解析完成后即可开始编辑。调整好模板后，点击右上角的“上传模板”按钮，等待上传过程结束。
上传完成后，点击查看作品即可打开模板，之后你可以在“我的作品”区域找到该模板。
目前，该线上版本主要用于功能测试，因此所有资源都将上传到 Github，并使用 jsdelivr 作为CDN节点进行访问。请注意，在某些网络环境下，这可能会导致体验不佳，必要时请确保你的网络环境适宜，或采取必要的网络优化措施。
由于服务器位于国内，生成下载图片时可能会出现图裂现象，但这并非技术故障。
如果你需要上传去除背景的图片，系统将自动完成背景抠除的操作。在线体验[5]
以上在线体验效果的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 地址：https://github.com/palxiao/front-end-arsenal
/src
由于项目在开发过程中曾一度采用Vue2进行开发，后来才改用Vue3进行重构，因此部分代码中混合了Options API的写法。对于各位开发者，请谅解这种不统一的做法。
早在去年年中，我在一篇总结文章中首次分享了这个项目，收到了许多私信，表达了对项目的兴趣，甚至有人提出愿意花钱购买源码或进行商业化二次开发。我当时都婉拒了。我的想法是：既然这个项目能够引起关注，说明它一定具有一定的价值，那么就不应该将其封闭起来！
与许多程序员一样，我的前端开发之路也是从编写一段段“胶水”代码开始的。遇到问题时，我的第一反应是打开浏览器进行搜索，然后从各种问答和笔记中逐步寻找解决方案。
随着时间的推移，我的代码编写越来越熟练，对各种框架和库也更加得心应手，可以说已经初步掌握了前端开发的精髓。有时，我甚至能够独立扛起整个前端项目的开发工作。当然，项目中通常也包含了几十甚至上百个第三方依赖。
不必为此感到羞愧，这许多公司开发的常态。技术的探索和学习是永无止境的，但如果无法保证效率，你可能会面临失业的风险。如果你试图手撸所有插件库，可能连一个完整的项目都难以完成。
在我最初开发这个项目时，并没有找到现成的开源项目可以参考，最终虽然完成了整个项目，但也走了不少弯路。因此，当我看到许多人对这个项目表示关注时，仿佛看到了曾经的自己。于是，我决定开源，即使我的代码写得再不完美，也或许能帮助到需要的人。
事实上，今年有人基于我的项目进行了二次开发，并成功在公司内部上线了编辑器：
也有人计划在公司搭建器上增加类似的功能，并特意添加了我的微信向我表示感谢：
虽然这些成果并非完全由我独立完成，但他们至少避免了踩我走过的坑，节省了更多的时间，可以专注于自己热爱的领域，实现自己的技术追求，最终创造出更多的轮子。前端的生态就会因此变得更加繁荣，每个人都能从中受益。这也是开源的重要意义之一。
目前，该项目仍在不断完善中，可能存在许多不足之处，代码质量也有待提高，但我相信这是一个不断学习和成长的过程。开源不易，如果这个项目对你有所帮助或启发，请点个 Star 表示支持。感谢！
Github 仓库地址: https://github.com/palxiao/poster-design
[1] 在线Demo: https://design.palxp.com/[2] 文档网站: https://xp.palxp.com/[3] PSD解析上传界面: https://design.palxp.com/psd[4] AI抠图在线体验: https://design.palxp.com/home?koutu=1