微信小程式把頁面做成圖片分享【原創】
阿新 • • 發佈:2018-12-30
onLoad: function (options) { var that = this var userInfo, nickName, avatarUrl //獲取使用者資訊,頭像,暱稱之類的資料 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 }) } }) //獲取使用者裝置資訊,螢幕寬度 wx.getSystemInfo({ success: res => { that.setData({ screenWidth: res.screenWidth }) console.log(that.data.screenWidth) } }) //定義的儲存圖片方法 saveImageToPhotosAlbum: function () { wx.showLoading({ title: '儲存中...', }) var that = this; //設定畫板顯示,才能開始繪圖 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 + " 」試試運氣" 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("長按識別小程式", unit * 90, unit * 408) context.fillText(wxappName, unit * 90, unit * 428) //把畫板內容繪製成圖片,並回調 畫板圖片路徑 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: '圖片繪製中,請稍後重試', showCancel: false }) } console.log(that.data.shareImgPath) //畫板路徑儲存成功後,呼叫方法吧圖片儲存到使用者相簿 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 }) } }) } }) }); },