溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹怎么利用微信小程序中Canvas API來合成海報生成組件封裝，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
原理：主要利用微信小程序強大的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相關參數配置
| 參數 | 類型 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| 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）而來，實際情況可直接按設計稿上尺寸配置參數.
以上是“怎么利用微信小程序中Canvas API來合成海報生成組件封裝”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
