說白了就是用canvas生成一張圖片，圖片里的內(nèi)容可以任意添加刪除修改，并可拖動元素位置，可設(shè)置字體顏色大小。
最終要求的效果圖如下：

image.png

實(shí)現(xiàn)步驟

1、 編輯器的實(shí)現(xiàn)

使用 zrender 框架。可以快速的完成canvas的添加刪除拖拽等操作。
記錄插入元素的類型及屬性，目前繪制類型只有圖片(二維碼)，文本（姓名，時間，地點(diǎn)，公司，提示文字））兩種類型。根據(jù)類型把這些數(shù)據(jù)屬性保存到JSON。對應(yīng)的格式為：

backgroundImage:'xxxx.jpg', //背景圖片地址
elments:[ //用來保存元素的數(shù)組

{
type:'text', 
fild:'name' , //字段名 用來對應(yīng)替換動態(tài)數(shù)據(jù)
 label:'姓名',
x:100,
y:100,
color:'#fff',
fontSize:18
},

{
type:'image',
fild:'qrcode',
 label:報名二維碼',
x:100,
y:100,
color:'#fff',
width:18,
height:30
},

{
type:'text',
fild:'time',
 label:會議時間',
x:100,
y:100,
color:'#fff',
width:18,
height:30
}，

{
type:'text',
fild:'address',
 label:會議地點(diǎn)',
x:100,
y:100,
color:'#fff',
fontSize:28
}

]

提交后 服務(wù)器保存此數(shù)據(jù)。對應(yīng)一個 /saveWxInvite的接口，post data is

{ 
   id:'event id',
   data:{ ... }
}

2. 服務(wù)端生成圖片

需求：當(dāng)參會者報名成功后推送一張邀請函圖片到微信（官方服務(wù)號推送）。

實(shí)現(xiàn)思路：服務(wù)端拿到參會者和參加的會議信息如：

{
name : '陽陽' ,  //姓名
qrcode :'7676676766' , //二維碼
time:'98899',
address:'xxxxxxxxxx' 
... ...
}

根據(jù)邀請函數(shù)據(jù)中fild類型對應(yīng)取數(shù)據(jù)中的動態(tài)信息 ，替換數(shù)據(jù)中的 label。然后利用服務(wù)端canvas繪制并生成圖片，最后發(fā)送到用戶微信，服務(wù)器上不需要保存此圖片。
node Canval模塊 https://github.com/Automattic/node-canvas

系統(tǒng)模版

系統(tǒng)模版為直接使用的內(nèi)置模版。不需要用戶自定義。

image.png

當(dāng)自定義功能完成后，我們手動保存幾個好看模版的data JSON入庫即可。
顯示的時候需要獲取這個模版列表。 調(diào)用 '/getWxInTpl'接口 ，返回 tpl list :

[
{
bgimg:'xxx.jpg',
tplId:'1'
},
{
bgimg:'xxx.jpg',
tplId:'2'
},
{
bgimg:'xxx.jpg',
tplId:'3'
},
... ...
]

根據(jù)此數(shù)據(jù)就是可以渲染顯示模版列表了。 保存的時候提交選中的模版ID即可。
繼續(xù)使用 /saveWxInvite的接口，post data is :

{ 
   id : 'event id',
   tplId : 'templateID'
}

后端根據(jù)兩種不同數(shù)據(jù)類型處理保存動作。