需求描述：

電商項(xiàng)目中有很多需要分享邀請(qǐng)的海報(bào)頁面，需要帶上自己的小程序碼，并且保存在本地，然后分享到朋友圈。

解決方法：

將海報(bào)通過wx.createCanvasContext繪制到畫布canvas組件。
使用canvasToTempFilePath將canvas海報(bào)保存到本地臨時(shí)文件路徑。
使用savelmageToPhotosAlbum將圖片保存到本地相冊(cè)。

定義海報(bào)內(nèi)容圖片

data: {isGetSet: true,poster_bg: '/images/invite_poster_bg.png',poster_qrcode: '/images/invite_poster_qrcode.png' },

將海報(bào)通過wx.createCanvasContext繪制到畫布canvas組件。

1.在wxml中添加canvas組件 。

<canvas class='canvas-poster' canvas-id='canvasposter'></canvas>

2.繪制海報(bào)內(nèi)容

drawPoster: function() {if(drawing){wx.showToast({title: '繪制中……',icon: 'loading',duration: 3000}) }else{drawing = true;// loading console.log('進(jìn)入繪制')var ctx = wx.createCanvasContext('canvasposter');// ctx.clearRect(0, 0, 280, 450);/* 繪制背景*/ctx.rect(0, 0, 730, 1300);ctx.setFillStyle('black');ctx.fillRect(0, 0, 730, 1300);/*繪制產(chǎn)品圖*/ctx.drawImage(this.data.poster_bg, 0, 0, 730, 1300);/*繪制二維碼*/ctx.drawImage(this.data.poster_qrcode, 265, 725, 200, 200);ctx.restore();ctx.draw(false, this.getTempFilePath);}},

使用canvasToTemprilePath將canvas海報(bào)保存到本地臨時(shí)文件路徑;

getTempFilePath: function() {wx.canvasToTempFilePath({canvasId: 'canvasposter',success: (res) => {this.saveImageToPhotosAlbum(res.tempFilePath)}}) },

使用savelmageToPhotosAlbum將圖片保存到本地相冊(cè)

saveImageToPhotosAlbum: function(imgUrl) {if (imgUrl) { wx.saveImageToPhotosAlbum({filePath: imgUrl,success: (res) => {console.log(res)wx.showToast({title: '保存成功',icon: 'success',duration: 3000})drawing = false},fail: (err) => {console.log(err)wx.showToast({title: '保存失敗',icon: 'error',duration: 3000})drawing = false}})} else {wx.showToast({title: '繪制中……',icon: 'loading',duration: 3000})} },

點(diǎn)擊按鈕保存海報(bào)到手機(jī)相冊(cè)（判斷是否獲取相冊(cè)授權(quán)，已獲得權(quán)限直接繪制，若未獲得權(quán)限，重新生成一個(gè)按鈕點(diǎn)擊需要用戶重新授權(quán)）

saveImageToPhotos: function(e) {let that = this// 相冊(cè)授權(quán)wx.getSetting({success(res) {// 進(jìn)行授權(quán)檢測(cè)，未授權(quán)則進(jìn)行彈層授權(quán)console.log(res.authSetting)if (!res.authSetting['scope.writePhotosAlbum']) {wx.authorize({scope: 'scope.writePhotosAlbum',success () {that.drawPoster();that.setData({isGetSet: true})},// 拒絕授權(quán)時(shí)，在下載按鈕上面增加打開手機(jī)設(shè)置按鈕fail() {console.log('拒絕授權(quán)')that.setData({isGetSet: false})}})} else {// 已授權(quán)則直接進(jìn)行保存圖片that.setData({isGetSet: true})that.drawPoster();}},fail(res) {console.log(res);}}) },

到此，一個(gè)動(dòng)態(tài)生成帶有小程序碼的海報(bào)下載流程就完成了。

完整案例

總結(jié)

以上是生活随笔為你收集整理的微信小程序之通过Canvas生成图片保存到手机相册的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。