需求描述：

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

解決方法：

將海報通過wx.createCanvasContext繪制到畫布canvas組件。
使用canvasToTempFilePath將canvas海報保存到本地臨時文件路徑。
使用savelmageToPhotosAlbum將圖片保存到本地相冊。

定義海報內容圖片

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

將海報通過wx.createCanvasContext繪制到畫布canvas組件。

1.在wxml中添加canvas組件 。

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

2.繪制海報內容

drawPoster: function() {if(drawing){wx.showToast({title: '繪制中……',icon: 'loading',duration: 3000}) }else{drawing = true;// loading console.log('進入繪制')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);/*繪制產品圖*/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海報保存到本地臨時文件路徑;

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

使用savelmageToPhotosAlbum將圖片保存到本地相冊

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})} },

點擊按鈕保存海報到手機相冊（判斷是否獲取相冊授權，已獲得權限直接繪制，若未獲得權限，重新生成一個按鈕點擊需要用戶重新授權）

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

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

完整案例

總結

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

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