摘要：每個小程序成型后，一般都會選擇生成帶菊花碼的海報分享出去來吸引更多的流量。
每個小程序成型后，一般都會選擇生成帶菊花碼的海報分享出去來吸引更多的流量。下面來介紹下他的一種實現方式吧
組件Github地址: https://github.com/WGinit/min...
原理：主要利用微信小程序強大的Canvas API來合成，生成后可用wx.canvasToTempFilePath()導出圖片地址，從而可實現預覽及保存至手機相冊
一、如何使用
打開項目文件夾
1、 git clone https://github.com/WGinit/mini-poster.git
2、在待使用頁面Json文件中注冊該組件
{ “usingComponents“:
{ “share-image“: “/components/share_image/share_image“ }
}
3、在頁面中使用該組件
二、參數配置
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）而來，實際情況可直接按設計稿上尺寸配置參數.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96614.html
