開發(fā)微信小程序的時(shí)候,經(jīng)常要遇到如上圖這樣的,保存小程序二維碼圖片的分享功能。網(wǎng)上找了很多都沒有具體的寫法,于是自己看官方文檔寫了一個(gè),分享一下。首先,需要在 wxml 中 創(chuàng)建一個(gè) 畫板 canvas 。wxml :<view class='more' bindtap='saveImageToPhotosAlbum'>保存圖片</view> //保存圖片按鈕 <canvas canvas-id='share' style='width:100vw;height:90vh;' hidden='{{canvasHidden}}'></canvas> //這里的 canvas-id 后面要用的上。 //style里的寬高要用上,不設(shè)置寬高畫板會(huì)失效。 //canvasHidden是控制畫板顯示隱藏的參數(shù),畫板直接設(shè)置display none,會(huì)導(dǎo)致失效。 data :data: { canvasHidden:true, //設(shè)置畫板的顯示與隱藏,畫板不隱藏會(huì)影響頁(yè)面正常顯示 avatarUrl: '', //用戶頭像 nickName: '', //用戶昵稱 wxappName: app.globalData.wxappName, //小程序名稱 shareImgPath: '', screenWidth: '', //設(shè)備屏幕寬度 description: app.globalData.description, //獎(jiǎng)品描述 FilePath:'', //頭像路徑 }, js :onLoad: function (options) { var that = this var userInfo, nickName, avatarUrl //獲取用戶信息,頭像,昵稱之類的數(shù)據(jù) wx.getUserInfo({ success: function (res) { console.log(res); userInfo = res.userInfo nickName = userInfo.nickName avatarUrl = userInfo.avatarUrl that.setData({ avatarUrl: res.userInfo.avatarUrl, nickName: res.userInfo.nickName, }) wx.downloadFile({ url: res.userInfo.avatarUrl }) } }) //獲取用戶設(shè)備信息,屏幕寬度 wx.getSystemInfo({ success: res => { that.setData({ screenWidth: res.screenWidth }) console.log(that.data.screenWidth) } }) //定義的保存圖片方法 saveImageToPhotosAlbum: function () { wx.showLoading({ title: '保存中...', }) var that = this; //設(shè)置畫板顯示,才能開始繪圖 that.setData({ canvasHidden: false }) var unit = that.data.screenWidth / 375 var path1 = "../images/bg3.png" var avatarUrl = that.data.avatarUrl console.log(avatarUrl + "頭像") var path2 = "../images/award.png" var path3 = "../images/qrcode.png" var path4 = "../images/headborder.png" var path5 = "../images/border.png" var unlight = "../images/unlight.png" var nickName = that.data.nickName console.log(nickName + "昵稱") var context = wx.createCanvasContext('share') var description = that.data.description var wxappName = "來「 " + that.data.wxappName + " 」試試運(yùn)氣" context.drawImage(path1, 0, 0, unit * 375, unit * 462.5) // context.drawImage(path4, unit * 164, unit * 40, unit * 50, unit * 50) context.drawImage(path2, unit * 48, unit * 120, unit * 280, unit * 178) context.drawImage(path5, unit * 48, unit * 120, unit * 280, unit * 178) context.drawImage(unlight, unit * 82, unit * 145, unit * 22, unit * 32) context.drawImage(unlight, unit * 178 , unit * 145, unit * 22, unit * 32) context.drawImage(unlight, unit * 274, unit * 145, unit * 22, unit * 32) context.drawImage(unlight, unit * 82, unit * 240, unit * 22, unit * 32) context.drawImage(unlight, unit * 178, unit * 240, unit * 22, unit * 32) context.drawImage(unlight, unit * 274, unit * 240, unit * 22, unit * 32) context.drawImage(path3, unit * 20, unit * 385, unit * 55, unit * 55) // context.drawImage(path4, 48, 200, 280, 128) context.setFontSize(14) context.setFillStyle("#999") context.fillText("長(zhǎng)按識(shí)別小程序", unit * 90, unit * 408) context.fillText(wxappName, unit * 90, unit * 428) //把畫板內(nèi)容繪制成圖片,并回調(diào) 畫板圖片路徑 context.draw(false, function () { wx.canvasToTempFilePath({ x: 0, y: 0, width: unit * 375, height: unit * 462.5, destWidth: unit * 375, destHeight: unit * 462.5, canvasId: 'share', success: function (res) { that.setData({ shareImgPath: res.tempFilePath }) if (!res.tempFilePath) { wx.showModal({ title: '提示', content: '圖片繪制中,請(qǐng)稍后重試', showCancel: false }) } console.log(that.data.shareImgPath) //畫板路徑保存成功后,調(diào)用方法吧圖片保存到用戶相冊(cè) wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, //保存成功失敗之后,都要隱藏畫板,否則影響界面顯示。 success: (res) => { console.log(res) wx.hideLoading() that.setData({ canvasHidden: true }) }, fail: (err) => { console.log(err) wx.hideLoading() that.setData({ canvasHidden: true }) } }) } }) }); }, |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)