496_dongfengqichen_wxsmall/496_dongfengqichen/pages/poster/poster.js

// pages/poster/poster.js
const app = getApp()
//用于绘制海报的图片
let _savePostBg = []
//用户绘制海报的小程序码
let _saveQrCodeUrl = ""
//用户绘制头像的地址
let _saveUserHeadUrl = ""
let _totalDownloadTask = 6;//绘制需要下载的图片总数
let _currentSuccessDownloadTask = 0;//已完成下载的图片数
let _saveImg = false;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrl: app.globalData.urlStatic,//图片路径
    canvasContron:null,//canvas
    posterBg:[false,false,false],//海报背景
    qrCodeUrl:"",//二维码图片
    userHead: app.globalData.userInfoData ? app.globalData.userInfoData.avatarUrl : null,//用户头像
    userName:"",
    // rankNum: '0',//缓存数字
    windowScale:0,//屏幕缩放比
    windowW: 0,//屏幕宽度
    windowH: 0,//屏幕高度
    posterUrl:[false,false,false],//海报图片
    canvasShow: true,//是否渲染canvas
    swiperCurrent: 0,//swiper选中的元素下标
    userInfoData: app.globalData.userInfoData,
    posterState:false,//海报是否合成完毕
    posterBottom:null,
    selectType:1,
    numBg:["","","",""],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    app.globalData.nowPage = 2;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    if(app.globalData.userInfoData && app.globalData.userInfoData.avatarUrl){
      this.data.userHead = app.globalData.userInfoData.avatarUrl;
      this.setData({
        userHead:app.globalData.userInfoData.avatarUrl,
        userName:app.globalData.userInfoData.nickName
      })
    }
    this.data.canvasContron = wx.createCanvasContext('myCanvas');
    if (app.globalData.openid) {
      this.createQrcode();
    //   this.getCertificationCount();
    } else {
      app.globalData.openidSuccessFuc = this.createQrcode;
    }
  },
  cacheFun:function(){
    wx.getSystemInfo({
      success: option => {
        this.data.windowScale = option.windowWidth / 750;
        this.data.windowW = option.windowWidth;
        this.data.windowH = option.windowHeight;
        for (let i = 0; i < 3; i++) {
          wx.getImageInfo({//缓存海报背景
            src: this.data.imgUrl + '/newImages7/16_'+(i+1)+'.png?v=003',
            success: res => {
              this.data.posterBg[i] = res.path;
              _savePostBg[i] = res.path;
              _currentSuccessDownloadTask ++;
              this.posterDrawing(this.data.swiperCurrent + 1);
            }
          })
        }
        wx.getImageInfo({//缓存二维码
          src: this.data.qrCodeUrl,
          success: res => {
            this.data.qrCodeUrl = res.path;
            _saveQrCodeUrl = res.path;
            _currentSuccessDownloadTask++;
            this.posterDrawing(this.data.swiperCurrent + 1);
          }
        })
        if (this.data.userHead) {
          wx.getImageInfo({//缓存头像
            src: this.data.userHead,
            success: res => {
              this.data.userHead = res.path;
              _saveUserHeadUrl = res.path;
              _currentSuccessDownloadTask++;
              this.posterDrawing(this.data.swiperCurrent + 1);
            }
          })
        }
        // wx.getImageInfo({//缓存数字背景
        //   src: this.data.imgUrl + '/images/posterNum.png?v=004',
        //   success: res => {
        //     this.data.numBg = res.path;
        //   }
        // })
        // wx.getImageInfo({//缓存数字背景1
        //   src: this.data.imgUrl + '/newImages4/5.png?v=004',
        //   success: res => {
        //     this.data.numBg[0] = res.path;
        //     _currentSuccessDownloadTask++;
        //     this.posterDrawing(this.data.swiperCurrent + 1);
        //   }
        // })
        // wx.getImageInfo({//缓存数字背景2
        //   src: this.data.imgUrl + '/newImages4/6.png?v=004',
        //   success: res => {
        //     this.data.numBg[1] = res.path;
        //     _currentSuccessDownloadTask++;
        //     this.posterDrawing(this.data.swiperCurrent + 1);
        //   }
        // })
        // wx.getImageInfo({//缓存数字背景3
        //   src: this.data.imgUrl + '/newImages4/4.png?v=004',
        //   success: res => {
        //     this.data.numBg[2] = res.path;
        //     _currentSuccessDownloadTask++;
        //     this.posterDrawing(this.data.swiperCurrent + 1);
        //   }
        // })
        // wx.getImageInfo({//缓存数字背景4
        //   src: this.data.imgUrl + '/newImages3/51.png?v=005',
        //   success: res => {
        //     this.data.numBg[3] = res.path;
        //     _currentSuccessDownloadTask++;
        //     this.posterDrawing(this.data.swiperCurrent + 1);
        //   }
        // })


        wx.getImageInfo({//缓存海报底部图片
          src: this.data.imgUrl + "/newImages7/15.png?v=002",
          success: res => {
            this.data.posterBottom = res.path;
            _currentSuccessDownloadTask++;
            this.posterDrawing(this.data.swiperCurrent + 1);
          }
        })
        // for (let i = 0; i < this.data.rankNum.length; i++) {
        //   wx.getImageInfo({//缓存数字
        //     src: this.data.imgUrl + '/images/nums/' + this.data.rankNum[i] + '.png',
        //     success: res => {
        //       this.data.rankNum[i] = res.path;
        //       _currentSuccessDownloadTask ++;
        //       this.posterDrawing(this.data.swiperCurrent + 1);
        //     }
        //   })
        // }
      }
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    _totalDownloadTask = 6;
    _currentSuccessDownloadTask = 0;
    _saveImg = false;
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '您有一份启辰星专属礼品待领取',
      // imageUrl: this.data.imgUrl + "/newImages3/28_" + (this.data.swiperCurrent+1)+".png?v=004",
      imageUrl: this.data.imgUrl + "/newImages7/1.png",
      path: "/pages/coupon/coupon?scene=" + app.globalData.openid
    }
  },
  saveImg: function () {//保存到手机
    console.log(this.data.posterUrl);
    if (!this.data.posterUrl[this.data.swiperCurrent]){
      wx.showLoading({
        title: '海报合成中',
        mask:true
      })
      console.log("swiperCurrent = " + this.data.swiperCurrent)
      _saveImg = true;
      this.posterDrawing(this.data.swiperCurrent + 1);
    }else{
      this.savePic();
    }
  },
  savePic: function () {
    wx.hideLoading();
    wx.saveImageToPhotosAlbum({
      filePath: this.data.posterUrl[this.data.swiperCurrent],
      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: this.data.posterUrl[this.data.swiperCurrent],
                            success(res) {
                              wx.showToast({
                                title: '保存成功'
                              })
                            }
                          })
                        } else {
                          wx.showToast({
                            title: '授权失败',
                            icon: "none"
                          })
                        }
                      }
                    })
                  }
                }
              })
            }
          }
        })
      }
    })
  },
  posterDrawing: function (e) {//海报绘制
    // console.log("_totalDownloadTask = " + _totalDownloadTask)
    // console.log("_currentSuccessDownloadTask = " + _currentSuccessDownloadTask)
    //图片尚未下载完成，禁止绘制
    if(_currentSuccessDownloadTask < _totalDownloadTask || !_saveImg){
      return;
    }
    // return;
    var ctx = this.data.canvasContron;//canvas对象
    var scale = this.data.windowScale;//屏幕缩放比
    //背景
    ctx.drawImage(this.data.posterBg[e-1], 0, 0, scale * 750, scale * 1335);//
    ctx.setFillStyle("#FFFFFF");
    ctx.save();
    ctx.beginPath(); //开始绘制
    //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
    ctx.arc(scale * 50 / 2 + scale * 121, scale * 50 / 2 + scale * 62, scale * 50 / 2, 0, Math.PI * 2, false);
    ctx.clip(); //剪切
    console.log(this.data.userHead)
    ctx.drawImage(this.data.userHead, scale * 121, scale * 62, scale * 50, scale * 50); //头像
    ctx.restore(); //恢复之前保存的绘图上下文
    //名称
    ctx.setFontSize(scale * 22);
    if(this.data.swiperCurrent==1){
      ctx.setFillStyle('#595757');
    }else{
      ctx.setFillStyle('#FFFFFF');
    }
    ctx.setTextAlign('left');
    ctx.fillText(app.globalData.userInfoData ? ("@"+app.globalData.userInfoData.nickName) : "", scale * 179, scale *93);
    //我是第XXX星探
    // ctx.drawImage(this.data.numBg, scale * 86, scale * 1010, scale * 563, scale * 124);
    // ctx.drawImage(this.data.numBg[0], scale * 86, scale * 1016, scale * 169, scale * 56);
    // ctx.drawImage(this.data.numBg[1], scale * (303+this.data.rankNum.length*58), scale * 1016, scale * 111, scale * 55);
    // ctx.drawImage(this.data.numBg[2], scale * 86, scale * 1098, scale * 307, scale * 33);
    // //排名数字
    // for(let i=0;i<this.data.rankNum.length;i++){
    //   ctx.drawImage(this.data.numBg[3], scale * (283+i*58), scale * 1010, scale * 58, scale * 77);
    //   ctx.drawImage(this.data.rankNum[i], scale * (285+i*59), scale * 1012, scale * 52, scale * 70);
    // }
    //二维码
    ctx.drawImage(this.data.posterBottom, 0, scale * 1163, scale * 750, scale * 170);
    ctx.drawImage(this.data.qrCodeUrl, scale * 579, scale * 1186, scale * 140, scale * 140);
    //绘制
    ctx.draw(false, setTimeout(() => {
      wx.canvasToTempFilePath({
        width:scale*750,
        height: scale * 1335,
        canvasId: 'myCanvas',
        success: res => {
          this.data.posterUrl[this.data.swiperCurrent] = res.tempFilePath;
          this.savePic();
        }
      })
    }, 300));
  },
  savePoster:function(){//预览海报
    wx.previewImage({
      current: this.data.posterUrl[this.data.swiperCurrent],
      urls: this.data.posterUrl // 需要预览的图片http链接列表
    })
  },
  prevImg() {//上一张图片
    if (this.data.swiperCurrent > 0) {
      this.setData({
        swiperCurrent: this.data.swiperCurrent -= 1,
      })
    }
  },
  nextImg() {//下一张图片
    if (this.data.swiperCurrent < this.data.posterUrl.length - 1) {
      this.setData({
        swiperCurrent: this.data.swiperCurrent += 1,
      })
    }
  },
  swiperChange(e) {//通过鼠标滑动改变swiper时
    if (e.detail.source == "touch") {
      this.setData({
        swiperCurrent: e.detail.current,
      })
    }
  },
  getCertificationCount: function () {//获取星探计划人数
    app.wxRequest(app.globalData.urlRoot +"certificationInfo/getCertificationNum",{},res=>{
      if(res.code==200){
        if(res.data){
          if (res.data.certificationNum){
            // res.data.certificationNum = 9990;
              this.data.rankNum = res.data.certificationNum.toString().split("");
              // console.log(this.data.rankNum);
            // }
          }else{
            this.data.rankNum = "0".split("");
          }
        }else{
          this.data.rankNum = "0".split("");
        }
        _totalDownloadTask += this.data.rankNum.length;
        this.setData({
          rankNum: this.data.rankNum
        })
      }
    },this)
  },
  createQrcode: function () {//获取个人小程序分享码
    app.wxRequest(app.globalData.urlRoot + "wxInfo/getQrcode", {}, res => {
      if (res.code = 200) {
        this.setData({
          qrCodeUrl: res.data.qrcodeUrl
        })
        this.cacheFun();
      }
    }, this)
  },
  closeXieyi:function(){
    wx.navigateBack({
      delta: 1
    })
  },
  changeSelect:function(){
    if(this.data.selectType==1){
      this.setData({
        selectType:2
      })
    } else {
      this.setData({
        selectType: 1
      })
    }
  }
})