|
小程序提供了轉發給好友的接口，但是沒提供分享到朋友圈的接口。于是，只有引導用戶保存圖片分享到朋友圈。 兩種方案：用微信 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 不能直接使用網絡圖片
-
需要處理獲取權限，用戶拒絕后的場景
最后
|
