applet/sph_applet_�.../poster/index.js

// pages/extension/poster/index.js
const app = getApp()
Page({
  data: {
    swiperImgUrls: [
      'https://www.wenxingshuju.com/poster_h5/poster_invite_1.png','https://www.wenxingshuju.com/poster_h5/poster_invite_2.png','https://www.wenxingshuju.com/poster_h5/poster_invite_3.png',
    ],
    swiperIndex: 0,
    tempFilePath:'',
    writePhotosFlag:-1,
    invite_code:'',
    id:'',
    evm_url:''
  },
  onLoad: function (options) {
    this.setData({invite_code:wx.getStorageSync('userInfo').invite_code,id:options.id})
    this.getSet()
    this.init()
  },
  init(){
    wx.showLoading({ title: '加载中', })
    app.func.req('/api/sphUserShare/getCommentQrCode', 'get', {
      path:'pages/index/index',
      param:{invite:this.data.invite_code,qun_id:this.data.id}
    }, (res) => {
      wx.hideLoading()
      if(res && res.errno == 0){
        this.setData({evm_url:app.data.rootDocment+'/'+res.rst})
      }else{
        wx.showToast({
          title: res.err,
          icon: 'none',
          duration: 2000
        })
      }
    },()=>{
      wx.hideLoading()
    })
  },
  swiperChange(e) {
    const that = this;
    that.setData({
      swiperIndex: e.detail.current,
    })
  },
  formSubmit: function (e) {//点击生成海报
    var that = this;
    wx.showToast({
      title: '请稍后...',
      icon: 'loading',
      duration: 1000
    });
    setTimeout(function () {
      wx.hideToast()
      that.createNewImg();
      // that.setData({
      //   maskHidden: true
      // });
    }, 1000)
  },
  createNewImg: function () {////将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
    var that = this;
    var path1 = ''
    var path2 = ''
    var promise1 = new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: that.data.swiperImgUrls[that.data.swiperIndex],
        success: function (res) {
          path1 = res.path
          resolve()
        }
      })
    });
    var promise2 = new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: that.data.evm_url,
        success: function (res) {
          path2 = res.path;
          resolve()
        }
      })
    });
    Promise.all([promise1,promise2]).then((values)=> {
      var context = wx.createCanvasContext('mycanvas');
      context.drawImage(path1, 0, 0, 350, 494);
      // 绘制图片圆角
      var bg_x = 145,bg_y=390,bg_w=60,bg_h=60,bg_r=10
      context.save()
      context.beginPath()
      context.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI*1.5)
      context.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2)
      context.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5)
      context.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI)
      context.clip()
      context.drawImage(path2, bg_x, bg_y, bg_w, bg_h);
      // 恢复之前保存的绘图上下文
      context.restore()
      context.setStrokeStyle('transparent');
      // 绘制文字
      context.setFontSize(10);
      context.setFillStyle('#B4BDFF');
      context.setTextAlign('center');
      context.fillText("扫码进入小程序", 175, 470);
      context.stroke();

      context.draw();
      //将生成好的图片保存到本地
      setTimeout(function () {
        wx.canvasToTempFilePath({
          canvasId: 'mycanvas',
          success: function (res) {
            var tempFilePath = res.tempFilePath;
            that.setData({
              imagePath: tempFilePath,
            });
            that.downloadImg()
          },
          fail: function (res) {
            console.log(res);
          }
        });
      }, 200);
    });
  },
  downLoadImgEvent(){
    this.getSet(()=>{
      if(!this.data.writePhotosFlag){
        wx.openSetting()
        return
      }
      var _this = this;
      wx.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            _this.setData({writePhotosFlag:false})
              wx.authorize({
              scope:'scope.writePhotosAlbum',
              success() {//授权成功
                _this.setData({writePhotosFlag:true})
                _this.formSubmit()
              },
              fail:function(err){
                _this.setData({writePhotosFlag:false})
              }
            })
          }else{//已经授权
          _this.setData({writePhotosFlag:true})
          _this.formSubmit()
          }
        }
      })
    })
  },
  downloadImg(){
    var _this = this
    var imgSrc = this.data.imagePath
    wx.saveImageToPhotosAlbum({
      filePath: imgSrc,
      success: function (data) {
        _this.recordInvite(2)
        wx.showToast({
          title: '海报已保存到相册',
          icon: 'success',
          duration: 2000
        })
      },
      fail: function (err) {
      },
      complete(res){
     }
    })
  },
  getSet(cb){
    var _this = this;
    wx.getSetting({
      success(res) {
        if(res.authSetting['scope.writePhotosAlbum'] == false){
          _this.setData({writePhotosFlag:false})
        }
        if(res.authSetting['scope.writePhotosAlbum'] == true){
          _this.setData({writePhotosFlag:true})
        }
        cb?cb():''
      }
    })
  },
  recordInvite(type){//按钮埋点
    app.func.req('/api/praise/recordInvite', 'post', {
      sph_praise_id:this.data.id,
      type:type
    }, (res) => {
      if(res && res.errno == 0){
      }else{
      }
    },()=>{
    })
  },
  onShareAppMessage: function (res) {
    this.recordInvite(1)
    return app.extensionShare(res,this.data.id)
  }
})