微信小程序制作海報(bào)并分享到朋友圈如何實(shí)現(xiàn)
小程序制作海報(bào)可以通過(guò)一些小程序直接上傳圖片實(shí)現(xiàn),這里小編為大家介紹如何通過(guò)小程序自己制作海報(bào)并分享到朋友圈呢?
添加畫(huà)布
首先,在小程序里進(jìn)行繪圖操作需要用到<canvas>組件,那我們就先在我們的wxml代碼中放入如下的<canvas>:
<canvas canvas-id="shareCanvas" style="width:600px;height:900px"></canvas>
這樣一來(lái)我們就有了一個(gè)600x900的繪圖區(qū)域。然后,我們要開(kāi)始寫(xiě)JS代碼在這張畫(huà)布上進(jìn)行繪圖操作。
步驟1:繪制背景圖
通過(guò)觀察《長(zhǎng)城你造不造》合成的那張分享圖,我們可以分析得出它的組成主要有以下3個(gè)部分:一張大的背景圖,一段動(dòng)態(tài)的文字(xxxx 喊你“一起來(lái)為修長(zhǎng)城獻(xiàn)磚”),以及一個(gè)小程序碼圖片。
那么我們就先找一張圖片來(lái)當(dāng)做背景圖,將它畫(huà)到畫(huà)布上去,代碼大致如下:
const wxGetImageInfo = promisify(wx.getImageInfo)
wxGetImageInfo({
src: 'https://some-domain/bg.png'
}).then(res => {
const ctx = wx.createCanvasContext('shareCanvas')
ctx.drawImage(res.path, 0, 0, 600, 900)
ctx.draw()
})
在這段代碼中,我們通過(guò)使用wx.getImageInfo這個(gè)API來(lái)下載一個(gè)網(wǎng)絡(luò)圖片到本地(并可獲取該圖片的尺寸等其他信息),然后調(diào)用ctx.drawImage方法將圖片繪制到畫(huà)布上,填滿畫(huà)布。
步驟2:繪制文字
接著,讓我們來(lái)在畫(huà)布上繼續(xù)繪制一段文字,一般這種宣傳用的分享圖,少不了文字描述,而且可能是根據(jù)場(chǎng)景內(nèi)容不同而產(chǎn)生的動(dòng)態(tài)信息,比如可能是一篇文章的作者、文章的標(biāo)題和內(nèi)容。
我們嘗試下在畫(huà)布上添加一段居中顯示的文字:“作者:一斤代碼”,還是基于前面的那段代碼接著寫(xiě):
const wxGetImageInfo = promisify(wx.getImageInfo)
wxGetImageInfo({
src: 'https://some-domain/bg.png'
}).then(res => {
const ctx = wx.createCanvasContext('shareCanvas')
// 底圖
ctx.drawImage(res.path, 0, 0, 600, 900)
// 作者名稱
ctx.setTextAlign('center') // 文字居中
ctx.setFillStyle('#000000') // 文字顏色:黑色
ctx.setFontSize(22) // 文字字號(hào):22px
ctx.fillText(“作者:一斤代碼”, 600 / 2, 500)
ctx.stroke()
ctx.draw()
})
由于在canvas上繪制文字不會(huì)自動(dòng)折行,如果要畫(huà)一段比較長(zhǎng)的文本,可以考慮限制一行的字?jǐn)?shù),將長(zhǎng)文本拆分成幾行來(lái)畫(huà)。
步驟3:繪制小程序碼
最后,我們?cè)诋?huà)布最后添加一個(gè)小程序碼,可以是靜態(tài)的小程序碼,也可以是比如為每一篇文章動(dòng)態(tài)生成的小程序碼(參考《微信小程序之生成自定義參數(shù)小程序二維碼》這篇文章),反正這個(gè)小程序碼也就是一張圖片,所以繪制方法跟繪制底圖差不多。最后的代碼類似如此:
const wxGetImageInfo = promisify(wx.getImageInfo)
Promise.all([
wxGetImageInfo({
src: 'https://some-domain.com/background.png'
}),
wxGetImageInfo({
src: 'https://some-domain.com/api/generate/qrcode'
})
]).then(res => {
const ctx = wx.createCanvasContext('shareCanvas')
// 底圖
ctx.drawImage(res[0].path, 0, 0, 600, 900)
// 作者名稱
ctx.setTextAlign('center') // 文字居中
ctx.setFillStyle('#000000') // 文字顏色:黑色
ctx.setFontSize(22) // 文字字號(hào):22px
ctx.fillText(“作者:一斤代碼”, 600 / 2, 500)
// 小程序碼
const qrImgSize = 180
ctx.drawImage(res[1].path, (600 - qrImgSize) / 2, 530, qrImgSize, qrImgSize)
ctx.stroke()
ctx.draw()
})
這樣,差不多我們的分享圖就生成好了。
保存到系統(tǒng)相冊(cè)
接著,我們要把它保存進(jìn)用戶的系統(tǒng)相冊(cè)中去,實(shí)現(xiàn)這個(gè)功能,我們主要靠wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum這兩個(gè)API。
主要的流程就是先通過(guò)wx.canvasToTempFilePath將<canvas>上繪制的圖像生成臨時(shí)文件的形式,然后再通過(guò)wx.saveImageToPhotosAlbum進(jìn)行保存到系統(tǒng)相冊(cè)的操作。
const wxCanvasToTempFilePath = promisify(wx.canvasToTempFilePath)
const wxSaveImageToPhotosAlbum = promisify(wx.saveImageToPhotosAlbum)
wxCanvasToTempFilePath({
canvasId: 'shareCanvas'
}, this).then(res => {
return wxSaveImageToPhotosAlbum({
filePath: res.tempFilePath
})
}).then(res => {
wx.showToast({
title: '已保存到相冊(cè)'
})
})
其中promise.util.js如下:
[javascript] view plain copy
/**
* 將wx的callback形式的API轉(zhuǎn)換成支持Promise的形式
*/
module.exports = {
promisify: api => {
return (options, ...params) => {
return new Promise((resolve, reject) => {
const extras = {
success: resolve,
fail: reject
}
api({ ...options, ...extras }, ...params)
})
}
}