efunbox-schedule-miniApps/compontents/share/share.js

// compontents/share/share.js
const APIClient = require('../../utils/APIClient.js');
Component({
  /**
   * 组件的属性列表
   * 分享弹窗 没怎么用
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    flag: true,
    postId: '',
    imgUrl: [],
    featureMap: {},
    title: '',
    ratio: '',
    codeImage: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏分享框
    hidePopup: function () {
      this.setData({
        flag: !this.data.flag
      })
    },
    //展示分享框
    showPopup (postId, imgUrl, featureMap, title, ratio) {
      this.setData({
        flag: !this.data.flag,
        postId,
        imgUrl,
        featureMap,
        title,
        ratio
      })
      const postsId = this.data.postId;
      APIClient.getqrCode({
        postsId,
        ind: '7'
      }).success((res) => {
        console.log(res.data.data)
        wx.downloadFile({
          url: res.data.data,
          success: (res) => {
            this.setData({
              codeImage: res.tempFilePath
            })
          }
        })
      })
    },
    //保存图片 
    saveImage (e) {
      const imgUrl = this.data.imgUrl;
      const ratio = this.data.ratio;
      const featureMap = this.data.featureMap;
      const title = this.data.title;
      //获取屏幕宽度
      const windowWidth = wx.getSystemInfoSync().windowWidth;
      //获取图片高度
      const imgHeight = windowWidth*ratio;
      //先绘制图片
      for (let item of imgUrl) {
        wx.downloadFile({
          url: item,
          success: (res) => {
            console.log(res.tempFilePath);
            const codeImage = this.data.codeImage;
            //canvas绘制文字和图片
            const ctx = wx.createCanvasContext('myCanvas');
            var imgPath = res.tempFilePath;
            ctx.setFillStyle('white')
            ctx.fillRect(0, 0, windowWidth, imgHeight + 300)
            //绘制用户上传的图片
            ctx.drawImage(imgPath, 0, 0, windowWidth, imgHeight);
            //绘制用户发表的内容和名字
            ctx.setFontSize(18)
            ctx.setFillStyle('black')
            ctx.fillText(title, 25, imgHeight + 90)
            ctx.setFontSize(12)
            ctx.fillText('在勋章战士上学会了这些，分享给大家', 25, imgHeight + 60)
            ctx.setFontSize(22)
            ctx.fillText(featureMap.wechatName, 25, imgHeight + 35);
            //横线
            ctx.moveTo(20, imgHeight + 140)
            ctx.lineTo(windowWidth - 40, imgHeight + 140)
            ctx.stroke()
            //二维码和文字
            ctx.drawImage(codeImage, 20, imgHeight + 150, 100, 100);
            ctx.setFontSize(16)
            ctx.setFillStyle('black')
            ctx.fillText('长按二维码', 150, imgHeight + 180)
            ctx.fillText('进入小程序查看更多', 150, imgHeight + 210)
            ctx.draw()
            setTimeout(() => {
              this.canvasToImage()
            }, 500)
          }
        })
      }
     
    },
    canvasToImage () {
        let that = this;
        //canvas生成图片
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: that.windowWidth,
          height: that.imgHeight + 300,
          destWidth: that.windowWidth,
          destHeight: that.imgHeight + 300,
          canvasId: 'myCanvas',
          success: (res) => {
              console.log(res.tempFilePath);
              //保存图片到本地
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: (res) => {
                    wx.showModal({
                        title: '存图成功',
                        content: '图片成功保存到相册了，去发朋友圈',
                        showCancel:false,
                        confirmText:'我知道了',
                        confirmColor:'#72B9C3',
                        success: (res) => {
                            if (res.confirm) {
                                console.log('用户点击确定');
                                this.setData({
                                  flag: !this.data.flag
                                })
                            }
                            //that.hideShareImg()
                        }
                    })
                }
              })
          },
          fail:function (res) {
              console.log(res)
          }
        })
    }
  }

})