小程式匯出朋友圈海報詳細記錄
小程式提供了轉發給好友的介面，但是沒提供分享到朋友圈的介面。於是，只有引導使用者儲存圖片分享到朋友圈。 兩種方案：用微信 api 手動儲存，用 painter 。
微信 api
使用原生介面的話，大致是使用 canvas 繪製出海報，然後下載。所以重點是繪製出海報，下載的流程都是一樣的。當然在儲存圖片到相簿前，還會需要獲取儲存圖片到相簿的許可權。總結下來就是canvas繪製，獲取儲存許可權，儲存圖片這三個步驟。 首先來看繪製海報，需要使用以下介面
- wx.createCanvasContext 建立 canvas context
- ctx.drawImage 繪製圖片到 canvas
- ctx.fillText 寫文字
- wx.getImageInfo 獲取網路圖片的 tempFilePath
- ctx.draw canvas 繪製
最終儲存下來的海報是這樣的
繪製的內容很簡單，首先就是背景圖；然後是分享者的頭像；接下來是 @ xx 邀請你 這樣一個文字描述；最後就是底部的小程式碼。
首先，建立 canvas 畫布
<canvas canvas-id='canvas' class='canvas' :style="{height: windowHeight + 'px'}"/>
複製程式碼
使用小程式 createCanvasContext api ,需要傳入 canvasid
const ctx = wx.createCanvasContext('canvas')
複製程式碼
然後將背景圖片繪製出來，背景圖片是放在本地的圖片。
ctx.drawImage('../../../static/assets/img/poster_background.png', 0, 0, this.windowWidth, this.windowHeight)
複製程式碼
然後寫上文字
ctx.setFontSize(12);
ctx.setFillStyle('#FFFFFF');
ctx.setTextAlign('center');
ctx.fillText(`${this.privateUserInfo.nickname} 邀您領取`, this.windowWidth / 2, this.transformScale(520))
複製程式碼
這裡會將原始尺寸和繪製的尺寸等比例轉換一下，就不贅述了。再接下來就是繪製小程式碼了。由於小程式碼是帶了分享者的資訊，所以必須是臨時獲取的網路圖片資源，具體怎麼獲取帶有分享者資訊的小程式碼，會專門寫一篇文章介紹。
繪製圖片
繪製頭像與小程式碼，這兩張圖片都是網路資源，所以都要使用 wx. getImageInfo 介面將其下載下來放到微信記憶體中，然後使用其response.path 繪製。小程式並不支援直接的繪製網路圖片，而且也不支援 base64圖片的繪製（雖然模擬器上會有效果）。頭像的繪製還有有一個裁剪圓形頭像的過程。wx.getImageInfo是非同步的，所以在回撥函式裡繪製，當然這不是好的方式。可以使用 promise 來解決，由於現在已經不用這個程式碼了，就沒有去改了。
wx.getImageInfo({
src: miniProgramCodeSrc,
success: (response) => {
const miniProgramCodeSize = this.transformScale(160)
ctx.drawImage(response.path, this.transformScale(85), this.transformScale(710), miniProgramCodeSize, miniProgramCodeSize)
wx.getImageInfo({
src: this.privateUserInfo.avatar,
success: (response) => {
const avatarSize = this.transformScale(100)
//先繪製圓，裁剪成圓形圖片
ctx.save();
ctx.beginPath();
//圓的原點x座標，y座標，半徑，起始弧度，終止弧度
ctx.arc(this.transformScale(320), this.transformScale(425), avatarSize / 2, 0, 2 * Math.PI);
ctx.setStrokeStyle('#ffffff');
ctx.stroke();
ctx.clip();
ctx.drawImage(response.path, this.transformScale(270), this.transformScale(375), avatarSize, avatarSize)
ctx.restore();
ctx.draw(false, () => {
this.saveToTempFilePath()
})
}
})
}
})
複製程式碼
到這一步，繪製基本就結束了。我們所要的海報內容已經可以在 canvas 上呈現了，接下來就是將 canvas 的內容儲存為圖片了。值得提醒的是，ctx.draw這個介面也是非同步的，需要在其回撥中執行下載的操作。
獲取 tempFilePath
- wx.canvasToTempFilePath 獲取整個 canvas 的tempFilePath
儲存圖片最重要的就是tempFilePath了，使用canvasToTempFilePath 獲取 tempFilePath。需要注意的是canvasToTempFilePath介面二參需要傳入 this。
saveToTempFilePath() {
wx.canvasToTempFilePath({
canvasId: 'canvas',
success: (response) => {
//獲取相簿授權
}
}, this)
}
複製程式碼
獲取 tempFilePath 成功後再獲取儲存許可權，當然也可以先獲取儲存許可權，再獲取tempFilePath。
獲取儲存許可權
首先檢視是否有儲存許可權，有許可權就可以直接儲存了。沒有許可權就先獲取許可權，再儲存。
- wx.getSetting 檢視許可權列表
- wx.authorize 若沒有儲存圖片許可權，進行授權
wx.getSetting({
success: (res) => {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope:'scope.writePhotosAlbum',
success: () => {
this.saveImageToPhotosAlbumByWX(response.tempFilePath)
}
})
} else {
this.saveImageToPhotosAlbumByWX(response.tempFilePath)
}
}
})
複製程式碼
儲存圖片到相簿
- wx.saveImageToPhotosAlbum 儲存圖片到相簿
這一步就很簡單了，萬事俱備，只差儲存了。呼叫 wx.saveImageToPhotosAlbum 即可。
saveImageToPhotosAlbumByWX(tempFilePath) {
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
complete: () => {
// 其他操作
}
})
}
複製程式碼
到這裡，使用原生 api 儲存一張分享朋友圈的海報就好了。
painter
painter 是什麼呢？
小程式生成圖片庫，輕鬆通過 json 方式繪製一張可以發到朋友圈的圖片
painter 是酷家樂開源的小程式圖片生成庫，類似 echarts，使用配置物件渲染圖片到 canvas。渲染完成後回撥會返回 tempFilePath,然後呼叫 wx.saveImageToPhotosAlbum 即可儲存。儲存的步驟和第一種方案一致，關鍵是獲取到 tempFilePath。
按照其 readme 來操作就好了，由於專案是使用了 mpvue，所以使用了 mpvue接入方案 。
使用 painter
<painter v-if="showPainter" class='canvas' @imgOK="onImgOk" :palette="palette"/> 複製程式碼
為什麼要使用 v-if 呢，需要在所有資料都準備好了後再渲染 painter，否則會無限繪製。
data() {
return {
//painter 配置資料
palette: {
width: '640rpx',
height: '1008rpx',
background: '/static/assets/img/poster_background.png',
views: [
{
type: 'image',
url: '',
css: {
top: '380rpx',
left: '320rpx',
align: 'center',
width: '100rpx',
height: '100rpx',
borderRadius: '50rpx'
}
}, {
type: 'text',
text: '',
css: {
top: '490rpx',
left: '320rpx',
align: 'center',
fontSize: '24rpx',
color: '#fff'
}
},
{
type: 'image',
url: '',
css: {
top: '690rpx',
left: '85rpx',
width: '180rpx',
height: '180rpx'
}
}
]
}
}
},
computed: {
showPainter() {
const avatar = this.palette.views[0].url
const text = this.palette.views[1].text
const qrCodeUrl = this.palette.views[2].url
return avatar !== '' && text !== '' && qrCodeUrl!== ''
}
}
複製程式碼
在 painter繪製成功的回撥裡，將 tempFilePath 儲存起來。接下來的許可權獲取和儲存圖片到相簿流程就和上一個方案一致了。但是，需要提醒的是，tempFilePath 需要放在全域性變數中，不能放在data 中。
總結
總結一下，遇到的一些坑
- 小程式canvas不能支援 base64
- drow 有回撥
- drawImage 不能直接使用網路圖片
- 需要處理獲取許可權，使用者拒絕後的場景
最後
海報就暴露了，是的，就是漫遊鯨。歡迎掃個碼體驗漫遊鯨小程式，歡迎瞭解下漫遊鯨。如果還不瞭解漫遊鯨， 那麼點選就能瞭解漫遊鯨啦