496_dongfengqichen_wxsmall/496_dongfengqichen/pages/guessPoster/guessPoster.js

// 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.setFontSize(scale * 33);
    ctx.setFillStyle('#FFFFFF');
    ctx.setTextAlign('left');
    ctx.fillText(this.data.userName?'@'+this.data.userName:"@", scale * 128, scale *952);
    ctx.setFontSize(scale * 27);
    ctx.fillText("启辰星", scale * 128, scale *1006);
    ctx.fillText("260T48V", scale * 218, scale *1006);
    ctx.fillText("轻混增压星享版", scale * 336, scale *1006);
    ctx.fillText("我的预测上市价为:", scale * 128, scale *1045);
    ctx.fillText(this.data.userPrice, scale * 128, scale *1085);
    ctx.fillText("元", scale * 228, scale *1085);
    ctx.fillText("来和我一起竞猜吧！", scale * 128, scale *1125);
    //二维码
    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"
                          })
                        }
                      }
                    })
                  }
                }
              })
            }
          }
        })
      }
    })
  }
})