收到一份需求，是要製作一套在線海報系統，系統的參考樣例如下圖所示
分為資源展示站
海報的設計工具
這種平臺現在市場上成功的有好多家，功能都較為完備並且模板十分豐富。這種需求往大了做可以稱之為 DaaS， 也就是 Design as a Service 設計即服務平臺，往小了做就是編輯器+CMS，但客戶因為是很垂直的行業，想自己運營那麼初期就是編輯器+CMS模式去定製。我們結合用戶的需求進行了一些產品調研，首先是對行業務的同類型產品，再個就是相似型。
這種產品的功能核心點在多媒體編輯器這裡，而業務核心點是一套模板交易系統。我們分別去探討並找出解決方案：
首先是設計工具，經過分析簡單版本的信息架構：
依照這個框架，一些關鍵技術點是需要解決編輯器可視化、psd文件導入後分層處理、素材和模板數據化，其它的相對容易處理，但需求時間很緊張，需要快速先面向市場進行驗證，我們就從以前調研過的兩套 h5 可視設計生成的開源系統入手，將編輯器部分的實現做為主要參考來實現海報製作工具。
這兩款工具都是類似易企秀的 h5 製作、建站工具，包含可視化的系統。其中設計工具與我們海報設計工具的基礎功能非常相近，下面分別介紹。
第一款是《魯班 H5》它是一款開源系統，功能如下：
第二款是《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
閱讀更多 劉佰晟 的文章
