// pages/guessPoster/guessPoster.js const app = getApp() let _savePostBg = "";//用于绘制海报的背景 let _totalDownloadTask = 2;//绘制需要下载的图片总数 let _currentSuccessDownloadTask = 0;//已完成下载的图片数 let windowScale = 0;//屏幕缩放比 let canvasContron = null;//canvas let posterUrl = "";//合成后的海报路径 let _saveImg = false; Page({ /** * 页面的初始数据 */ data: { imgUrl: app.globalData.urlStatic,//图片路径 selectType:1,//选中的分享类型 userPrice:0,//用户竞猜价格 userName:"",//用户昵称 qrCodeUrl:"",//用户二维码 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { app.globalData.nowPage = 3; this.setData({ userName:app.globalData.userInfoData.nickName, userPrice:app.globalData.getSecondGuessInfo.secondData.guess_price }) }, loadFun:function(){ this.getGuessPriceQrCode(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { canvasContron = wx.createCanvasContext('myCanvas'); if (app.globalData.openid) { this.loadFun(); } else { app.globalData.openidSuccessFuc = this.loadFun; } }, /** * 生命周期函数--监听页面显示 */ onShow: function () { _totalDownloadTask = 2; _currentSuccessDownloadTask = 0; _saveImg = false; }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { return { title: '召唤预言帝!快来和我一起猜启辰星售价,赢升舱大奖!', imageUrl:this.data.imgUrl+'/newImages5/56.jpg', path: "/pages/guess/guess" } }, changeType:function(){//切换分享类型 this.setData({ selectType:this.data.selectType==1?2:1 }) }, getGuessPriceQrCode:function(){//获取竞猜分享小程序码 app.wxRequest(app.globalData.urlRoot + "guessPrice/getGuessPriceQrCode", {}, res => { if (res.code == 200) { this.setData({ qrCodeUrl:res.data.qrcodeUrl }) this.cacheFun(); } }, this); }, cacheFun:function(){ wx.getSystemInfo({ success: option => { windowScale = option.windowWidth / 750; wx.getImageInfo({//缓存海报背景 src: this.data.imgUrl + '/newImages5/66.png', success: res => { _savePostBg = res.path; _currentSuccessDownloadTask ++; this.posterDrawing(); } }) wx.getImageInfo({//缓存二维码 src: this.data.qrCodeUrl, success: res => { this.data.qrCodeUrl = res.path; _currentSuccessDownloadTask++; this.posterDrawing(); } }) } }) }, posterDrawing: function (e) {//海报绘制 //图片尚未下载完成,禁止绘制 if(_currentSuccessDownloadTask < _totalDownloadTask){ return; } var ctx = canvasContron;//canvas对象 var scale = windowScale;//屏幕缩放比 //背景 ctx.drawImage(_savePostBg, 0, 0, scale * 750, scale * 1380); //二维码 ctx.drawImage(this.data.qrCodeUrl, scale * 574, scale * 1223, scale * 130, scale * 130); //绘制 ctx.draw(false, setTimeout(() => { wx.canvasToTempFilePath({ width:scale*750, height: scale * 1380, canvasId: 'myCanvas', success: res => { posterUrl = res.tempFilePath; if(_saveImg){ this.savePic(); } } }) }, 300)); }, saveImg: function () {//保存到手机 if (!posterUrl){ wx.showLoading({ title: '海报合成中', mask:true }) _saveImg = true; }else{ this.savePic(); } }, savePic: function () { wx.hideLoading(); wx.saveImageToPhotosAlbum({ filePath: posterUrl, success(res) { wx.showToast({ title: '保存成功' }) }, fail: res => { wx.getSetting({ success: res => { if (res.authSetting['scope.writePhotosAlbum']) { wx.showToast({ title: '保存失败', icon: "none" }) } else { wx.showModal({ title: '授权设置', content: '请授权“保存到相册”', success: (opt) => { if (opt.confirm) { wx.openSetting({ success: e => { if (e.authSetting['scope.writePhotosAlbum']) { wx.saveImageToPhotosAlbum({ filePath: posterUrl, success(res) { wx.showToast({ title: '保存成功' }) } }) } else { wx.showToast({ title: '授权失败', icon: "none" }) } } }) } } }) } } }) } }) } })