h5可视化界面设计工具（基于两款开源h5媒体编辑器定制一套海报系统）

h5可视化界面设计工具（基于两款开源h5媒体编辑器定制一套海报系统）第一款是《鲁班 H5》它是一款开源系统，功能如下：这两款工具都是类似易企秀的 h5 制作、建站工具，包含可视化的系统。其中设计工具与我们海报设计工具的基础功能非常相近，下面分别介绍。这种产品的功能核心点在多媒体编辑器这里，而业务核心点是一套模板交易系统。我们分别去探讨并找出解决方案：首先是设计工具，经过分析简单版本的信息架构：依照这个框架，一些关键技术点是需要解决编辑器可视化、psd文件导入后分层处理、素材和模板数据化，其它的相对容易处理，但需求时间很紧张，需要快速先面向市场进行验证，我们就从以前调研过的两套 h5 可视设计生成的开源系统入手，将编辑器部分的实现做为主要参考来实现海报制作工具。

收到一份需求，是要制作一套在线海报系统，系统的参考样例如下图所示

分为资源展示站

海报的设计工具

这种平台现在市场上成功的有好多家，功能都较为完备并且模板十分丰富。这种需求往大了做可以称之为 DaaS， 也就是 Design as a Service 设计即服务平台，往小了做就是编辑器 CMS，但客户因为是很垂直的行业，想自己运营那么初期就是编辑器 CMS模式去定制。我们结合用户的需求进行了一些产品调研，首先是对行业务的同类型产品，再个就是相似型。

这种产品的功能核心点在多媒体编辑器这里，而业务核心点是一套模板交易系统。我们分别去探讨并找出解决方案：

首先是设计工具，经过分析简单版本的信息架构：

依照这个框架，一些关键技术点是需要解决编辑器可视化、psd文件导入后分层处理、素材和模板数据化，其它的相对容易处理，但需求时间很紧张，需要快速先面向市场进行验证，我们就从以前调研过的两套 h5 可视设计生成的开源系统入手，将编辑器部分的实现做为主要参考来实现海报制作工具。

这两款工具都是类似易企秀的 h5 制作、建站工具，包含可视化的系统。其中设计工具与我们海报设计工具的基础功能非常相近，下面分别介绍。

第一款是《鲁班 H5》它是一款开源系统，功能如下：

编辑器 参考线 吸附线、组件对齐 拖拽改变组件形状 元素: 复制（画布） 元素: 删除（画布） 元素: 编辑（画布） 页面：新增 页面：复制 页面：删除 快速预览 撤销、重做

组件系统 文字 普通按钮 表单按钮 表单输入框 普通图片 背景图 背景音乐 视频（Iframe形式）

第二款是《quark-h5》它也是一款开源系统，设计工具的功能也上面的类似，但细节略好一些，可以看下面的图示

与我们想要的结果还是很相似的，这两款开源编辑器都是基于 vuejs 编辑的，也比较符合我们的技术栈，拿 quark-h5 的页面渲染逻辑说明一下我们将如何改造。

按上图所示，由于它们两家的目标是做为h5可视建站的目的存在，而它们的后端较我们的需求来讲复杂一些，大部分用不到，因此将全部的后端都摘除，只参考两家的编辑器部分，和数据处理部分。我们需求中也一样采用 json 可视化效果

以这种模式可以将编辑器中拖拽和新增加组件形成 json 格式数据，将于后端交互。而一个完整的设计就会成为模板，成为我们的另一种数据内容。这样一个较为完整的交互逻辑就形成了，而另一个问题是海报的生成，我们有几种解决方案

1、html2canvas 直接截图

2、json2canvas 用 json 的数据生成图片

3、chrome headless 服务端截图

这三种方案前两个可能会在截图质量上面有些差距，chrome headless 这种模式需要服务端处理较多，特别在处理线程上面，资源占用上。这个在下一步后端服务系统实现是会着重分析。

然后就是内容系统

这个内容系统因为内部细节较多，下次在业务系统讲解时详细说明。

它主要包含素材管理、模板管理、组件管理、账户管理、商品（模板做为一种商品）管理、支付接口对接等一些需求。这个系统就只能利用原有的一些系统积累去做定制了，因为没有完全合适的海报资源管理系统。

总结

这篇文章主要讲解基于两款开源 h5 媒体编辑器定制一套海报系统的参考范围，和基础的技术逻辑。

参考以下系统

https://github.com/huangwei9527/quark-h5

https://github.com/ly525/luban-h5