利用微信小程序中Canvas API來合成海報生成組件封裝

每個小程序成型后，一般都會選擇生成帶菊花碼的海報分享出去來吸引更多的流量。下面來介紹下其他的一種實現方式吧

 

原理：主要利用微信小程序強大的Canvas API來合成，生成后可用wx.canvasToTempFilePath()導出圖片地址，從而可實現預覽及保存至手機相冊

一、如何使用

打開項目文件夾

1	1、 git  clone  https://github.com/WGinit/mini-poster.git

2、在待使用頁面Json文件中注冊該組件

1 2 3 4 5

{ “usingComponents“:     { “share-image“: “/components/share_image/share_image“ }   }

3、在頁面中使用該組件

1 2 3 4 5

<share–image        drawDataList=“{{dataList}}“>   </share–image>

二、參數配置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

dataList: {     canvasData:{       type: 'image',       url: '',       top: 0,       left: 0,       width: 750,       height: 1334,       comment: '背景圖',       btnText: '保存至相冊'     },     content: [{       type: 'image',       url: '',       top: 136,       left: 100,       shape: 'square',       width: 290,       height: 186,       comment: '頭像'     }, {       type: 'text',       content: '白山羊',       top: 336,       left: 100,       fontSize: 40,       lineHeight: 40,       color: '#f00',       textAlign: 'left',       weight: 'bold',       maxWidth: 287     }]   }

三、參數說明

canvasData------------canvas相關參數配置

參數	類型	默認值	必填	說明
type	String	image	是	文件類型， 這里為背景圖，默認image
url	String	''	是	網絡圖片地址
top	Number	0	否	圖像的左上角在可視區域上 Y 軸的位置, 單位px
left	Number	0	否	圖像的左上角在可視區域上 X 軸的位置, 單位px
width	Number	750	否	畫布的寬度, 單位px
height	Number	1334	否	畫布的高度, 單位px
comment	String	'背景圖'	否	圖片描述
btnText	String	'保存至相冊'	是	生成按鈕文字

content -------繪制內容參數

參數	類型	默認值	必填	說明
type	String	''	是	繪制的類型，可選image和text
shape	String	'square'	否	繪制圖片的形狀, square 方形， circle 圓形
url	String	''	-	圖片的網絡地址， type為image必填
content	String	''	-	文本內容， type為text必填
top	Number	0	否	圖像的左上角在目標畫布上 Y 軸的位置, 單位px
left	NUmber	0	否	圖像的左上角在目標畫布上 X 軸的位置, 單位px
width	Number	100	否	繪制圖片的寬度,單位px
height	Number	100	否	繪制圖片的高度, 單位px
comment	String	''	否	繪制圖片的說明
fontSize	Number	32	否	文本字體大小,單位px
lineHeight	Number	32	否	文本行高, 單位px
color	String	'#FFFFFF '	否	文本字體顏色
textAlign	String	'center'	否	文本水平對齊方式, 可選left, center, right
weight	String	'normal'	否	文本字體粗細
maxWidth	Number	600	否	文本限制的最大寬度，單位px

四、備注

上述單位都是參照設計稿（750 * 1334）而來，實際情況可直接按設計稿上尺寸配置參數