lichebao/components/distributePoster/index.js

import _ from '../../commons/js/commons'
import Canvas from '../../commons/js/utils/canvas'
let isGetImgInfo = false
const app = getApp()
Component({
  //组件的属性列表
  properties: {
    source: {
      type: String,
      value: 'goods'
    },
    isShow: {
      type: Boolean,
      value: false
    },
    isCreateQrcode: {
      type: Boolean,
      value: false
    },
    qccodeid: {
      type: String,
      value: ''
    },
    customImg: {
      type: String,
      value: ''
    },
    slogan: {
      type: String,
      value: ''
    },
    moments: {
      type: String,
      value: ''
    },
  },

  //组件的初始数据
  data: {
    //headImg:app.getStorageByKey("userInfo").headimg,
    defaultQrcode: _.config.imgUrl + 'common/qr.jpg',
    imgs: [],
    tempPosterPath: '',
    showOptBtn:false,//操作按钮显示
  },

  attached: function () {
    isGetImgInfo = false
  },

  //数据监听
  observers: {
    'isCreateQrcode': function (e) {
      if (e) {
        this.getMaterialHomeQrcode()
      }
    },
    'isShow': function (e) {
      if (e) {
        this.setData({
          showOptBtn:false,
        })
        this.createPoster()
      }
    },
    'customImg': function (e) {
      if (e) {
        // this.setData({
        //   headImg:app.getStorageByKey("userInfo").headimg,
        // })
        //头像
        //this.getImageInfo(this.data.headImg, 4)
        this.getImageInfo(this.data.customImg, 3)
      }
    },
  },

  //组件的方法列表
  methods: {

    // 转化网络图片，获取路径
    getImageInfo(src, index) {
      let that = this
      isGetImgInfo = false
      setTimeout(function () {
        wx.getImageInfo({
          src: src,
          success: (res) => {
            let arr = that.data.imgs
            arr[index] = res
            that.setData({
              imgs: arr
            })
            isGetImgInfo = true
          },
          fail: (err) => {
            console.log('error img is: ' + src)
          }
        })
      }, 200)
    },

    //获取二维码
    getMaterialHomeQrcode() {
      let params = {};
      params['page'] = 'pages/special2/index';
      params['scene'] = this.data.qccodeid+'_'+app.getStorageByKey("userInfo").biz_id;
      params['width'] = 260;
      _.apiQuery.getMaterialHomeQrcode(params).then(res => {
        this.getImageInfo(res.data.url, 2)
      }).catch(res => {
        //this.getImageInfo(this.data.defaultQrcode, 2)
      })
    },

    //自定义海报
    customizePoster(CTX){

      if(this.data.customImg){
        let that = this
        this.setData({
          canvasInfo:{
            width: parseFloat(this.data.imgs[3].width/2)+'px',
            height: parseFloat(this.data.imgs[3].height/2)+'px'
          }
        })
        
        //背景
        if (that.data.imgs[3]) {
          CTX.drawImage(that.data.imgs[3].path, 0, 0, that.data.imgs[3].width, that.data.imgs[3].height, 0, 0, that.data.imgs[3].width/2, that.data.imgs[3].height/2)
        }

        // //头像
        // if (that.data.imgs[4]) {
        //   Canvas.circleImage(CTX,that.data.imgs[4].path,20, (that.data.imgs[3].height-170)/2,22/2)
        // }

        // //昵称
        // Canvas.drawTextOverflow(CTX, app.getStorageByKey("userInfo").nickname, 150, 1, 14, '#fff', 20, 46, (that.data.imgs[3].height-132)/2)

        // //标语
        // if (that.data.slogan) {
        //   Canvas.drawTextOverflow(CTX, that.data.slogan, 200, 2, 11, '#fff', 17, 20, (that.data.imgs[3].height-85)/2)
        // }

        // //标语
        // if (that.data.slogan) {
        //   Canvas.drawTextOverflow(CTX, that.data.slogan, 180, 2, 11, '#666', 17, 20, (that.data.imgs[3].height-100)/2)
        // }
      
        //二维码
        if (that.data.imgs[2]) {
          Canvas.circleImage(CTX,that.data.imgs[2].path,parseFloat(this.data.imgs[3].width/2)-parseFloat(this.data.imgs[3].width/8.5)-16, parseFloat(this.data.imgs[3].height/2)-parseFloat(this.data.imgs[3].width/8.5)-16,parseFloat(this.data.imgs[3].width/17))
        }

        setTimeout(function(){
          CTX.save()
          CTX.draw(true, function () {
            wx.hideLoading()
            that.saveCanvas()
          })
        },200)
        
      }
      
    },

    //生成海报
    createPoster() {
      let that = this
      wx.showLoading({
        title: '正在生成',
      })
      
      if(isGetImgInfo){
        this.setData({
          tempPosterPath: ''
        })
        let ctx = wx.createCanvasContext('postercanvas', that)
        that.customizePoster(ctx)
      }
    },

    //临时存储canvas
    saveCanvas() {
      let that = this
      wx.canvasToTempFilePath({
        canvasId: 'postercanvas',
        quality: 1,
        success: (res) => {
          // this.tempFilePath = res.tempFilePath
          that.setData({
            'tempPosterPath': res.tempFilePath
          })

          setTimeout(function () {
            that.setData({
              showOptBtn:true,
            })
          },200)

        },
        fail: (res) => {
          app.printErrorClient('poseterfail',['错误信息：临时存储canvas失败',JSON.stringify(res)])
        }
      }, this)
    },
    
    //保存到相册
    saveToAblum() {
      let that = this
      wx.saveImageToPhotosAlbum({
        filePath: this.data.tempPosterPath,
        success: (res) => {
          _.utils.$toast('保存成功')
        },
        fail: (err) => {
          app.printErrorClient('poseterfail',['错误信息：图片保存失败',JSON.stringify(err)])
          if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
            _.utils.$toast('您已取消保存')
          } else if (err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
            _.utils.$modal('提示', '保存图片失败，您可以点击确定设置获取相册权限后再尝试保存！', '去授权').then(res => {
              if (res) {
                wx.openSetting({}) // 打开小程序设置页面，可以设置权限
              }
            })
          }
        }
      })
    },

    //隐藏海报弹框
    hidePoster() {
      this.setData({
        isShow: false
      })
      wx.hideLoading()
    },

    //预览图片
    preview() {
      wx.previewImage({
        current: this.data.tempPosterPath, // 当前显示图片的http链接
        urls: [this.data.tempPosterPath] // 需要预览的图片http链接列表
      })
    },

    //推送链接
    pushLink(e) {
      if(e.currentTarget.dataset.url){
        _.$router.openUrlScheme(e.currentTarget.dataset.url)
      }
    },

    //复制内容
  copyWord(e){
    if(e.currentTarget.dataset.tx){
      wx.setClipboardData({
        data: e.currentTarget.dataset.tx,
        success (res) {
          _.utils.$toast('复制成功')
        }
      })
    }else{
      _.utils.$toast('目前无文案')
    }
  },

  }
})