每個小程式成型後,一般都會選擇生成帶有菊花碼的海報分享出去來吸引更多的流量。以下來介紹下其他的一種實作方式吧
原理:主要利用微信小程式強大的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、在頁面中使用該元件
<share–image drawDataList=“{{dataList}}“> </share–image>
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相關參數設定
參數 | 預設值 | 必填 | ##說明||
---|---|---|---|---|
String | image | 是 | 檔案類型, 這裡是背景圖,預設image | |
String | '' | 是 | 網路圖片位址 | |
Number | 0 | #No | 圖片的左上角在視覺區域上Y 軸的位置, 單位px | |
Number | #0 | #圖片的左上角在可視區域上X 軸的位置, 單位px | ||
Number | 750 | 否 | #畫布的寬度, 單位px | |
Number | 1334 | 否 | 畫布的高度, 單位px | |
String | '背景圖' | 否 | ##圖片描述 | |
String | '儲存至相簿' | 是 | 產生按鈕文字 |
參數 | #類型 | ##預設值必填 | 說明 | |
---|---|---|---|---|
String | '' | #是 | 繪製的類型,可選image和text | |
String | 'square' | 否 | 繪製圖片的形狀, square 方形, circle 圓形 | |
String | '' | - | 圖片的網路位址,type為image必填 | |
String | ##'' | - | 文字內容, type為text必填 | |
Number | 0 | 否 | 圖片的左上角在目標畫布上Y 軸的位置, 單位px | |
NUmber | 0 | 否 | 圖像的左上角在目標畫布上X 軸的位置, 單位px | |
Number | 100 | 否 | 繪製圖片的寬度,單位px | |
#Number | 100 | 否 | 繪製圖片的高度, 單位px | |
String | ' ' | 否 | 繪製圖片的說明 | |
Number | 32 | 否 | 文字字型大小,單位px | |
Number | 32 | #文字行高, 單位px | color | |
'#FFFFFF ' | #文字字體顏色 | textAlign | ||
#'center' | 否 | 文字水平對齊方式, 可選left, center, right | weight | |
'normal' | ||||
maxWidth
############四、備註######上述單位都是參考設計稿(750 * 1334)而來,實際情況可直接依設計稿上尺寸配置參數.######相關文章:#########js與canvas合成圖片做出微信公眾號海報功能############微信小程式的多檔案下載封裝使用######以上是利用微信小程式中Canvas API來合成海報產生元件封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章!