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

// pages/poster/poster.js
const app = getApp()
Page({

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

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

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.data.canvasContron = wx.createCanvasContext('myCanvas');
    if (app.globalData.openid) {
      this.getCertificationCount();
    } else {
      app.globalData.openidSuccessFuc = this.getCertificationCount;
    }
  },
  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 + '/images/tempImg'+(i+1)+'.jpg?v=006',
            success: res => {
              this.data.posterBg[i] = res.path;
            }
          })
        }
        wx.getImageInfo({//缓存二维码
          src: this.data.qrCodeUrl,
          success: res => {
            this.data.qrCodeUrl = res.path;
          }
        })
        if (this.data.userHead) {
          wx.getImageInfo({//缓存头像
            src: this.data.userHead,
            success: res => {
              this.data.userHead = res.path;
            }
          })
        }
        wx.getImageInfo({//缓存数字背景
          src: this.data.imgUrl + '/images/posterNum.png?v=004',
          success: res => {
            this.data.numBg = res.path;
          }
        })
        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;
            }
          })
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '您有一份启辰星专属礼品待领取',
      imageUrl: this.data.imgUrl + "/images/posterShareImg" + (this.data.swiperCurrent+1)+".jpg?v=003",
      path: "/pages/coupon/coupon?friendOpenid=" + app.globalData.openid
    }
  },
  saveImg: function () {//保存到手机
    console.log(this.data.posterUrl);
    if (!this.data.posterUrl[this.data.swiperCurrent]){
      wx.showLoading({
        title: '海报合成中',
        mask: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) {//海报绘制
    var ctx = this.data.canvasContron;//canvas对象
    var scale = this.data.windowScale;//屏幕缩放比
    //背景
    ctx.drawImage(this.data.posterBg[e-1], 0, 0, scale * 750, scale * 1380);//
    ctx.setFillStyle("#FFFFFF");
    ctx.save();
    ctx.beginPath(); //开始绘制
    //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
    ctx.arc(scale * 80 / 2 + scale * 84, scale * 80 / 2 + scale * 908, scale * 80 / 2, 0, Math.PI * 2, false);
    ctx.clip(); //剪切
    ctx.drawImage(this.data.userHead, scale * 84, scale * 908, scale * 80, scale * 80); //头像
    ctx.restore(); //恢复之前保存的绘图上下文
    //名称
    ctx.setFontSize(scale * 40);
    ctx.setFillStyle('#FFFFFF');
    ctx.setTextAlign('left');
    ctx.fillText(app.globalData.userInfoData ? app.globalData.userInfoData.nickName : "", scale * 174, scale *960);
    //我是第XXX星探
    ctx.drawImage(this.data.numBg, scale * 86, scale * 1010, scale * 563, scale * 124);
    //排名数字
    ctx.drawImage(this.data.rankNum[0], scale * 286, scale * 1012, scale * 52, scale * 70);
    ctx.drawImage(this.data.rankNum[1], scale * 343, scale * 1012, scale * 52, scale * 70);
    ctx.drawImage(this.data.rankNum[2], scale * 401, scale * 1012, scale * 52, scale * 70);
    ctx.drawImage(this.data.rankNum[3], scale * 459, scale * 1012, scale * 52, scale * 70);
    console.log(this.data.rankNum[3]);
    //二维码
    console.log(this.data.qrCodeUrl);
    ctx.drawImage(this.data.qrCodeUrl, scale * 476, scale * 1134, scale * 176, scale * 176);
    //绘制
    ctx.draw(false, setTimeout(() => {
      wx.canvasToTempFilePath({
        width:scale*750,
        height: scale * 1380,
        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 +"userInfo/getUserInfo",{},res=>{
      this.createQrcode();
      if(res.code==200){
        if (res.data.certificationNum){
          if (res.data.certificationNum<10){
            this.data.rankNum = ("000" + res.data.certificationNum.toString()).split("");
          } else if (res.data.certificationNum < 100) {
            this.data.rankNum = ("00" + res.data.certificationNum.toString()).split("");
          } else if (res.data.certificationNum < 1000) {
            this.data.rankNum = ("0" + res.data.certificationNum.toString()).split("");
          } else {
            this.data.rankNum = res.data.certificationNum.toString().split("");
          }
        }else{
          this.data.rankNum = "0000".split("");
        }
        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)
  }
})