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

// compontents/share/share.js
Component({
  /**
   * 组件的属性列表
   * 分享弹窗 没怎么用
   */
  properties: {

  },

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

  /**
   * 组件的方法列表
   */
  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
      })
    },
    //保存图片 
    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: function (res) {
        //     console.log(res);
        //   }
        // })
        //canvas绘制文字和图片
        const ctx = wx.createCanvasContext('myCanvas');
        var imgPath = item;
        ctx.setFillStyle('white')
        ctx.fillRect(0, 0, windowWidth, imgHeight + 300)
        //绘制用户上传的图片
        ctx.drawImage(imgPath, 0, 0, windowWidth, imgHeight);
        //绘制用户发表的内容和名字
        ctx.setFontSize(16)
        ctx.setFillStyle('black')
        ctx.fillText(title, 135, imgHeight + 55)
        ctx.setFontSize(18)
        ctx.fillText(featureMap.wechatName, 135, imgHeight + 35);
        //横线
        ctx.moveTo(20, imgHeight + 140)
        ctx.lineTo(windowWidth - 40, imgHeight + 140)
        ctx.stroke()
        //绘制用户头像圆形切割-开始
        ctx.save();
        ctx.beginPath();
        ctx.arc(70, imgHeight + 70, 50, 0, Math.PI * 2, false);
        ctx.fill();
        ctx.clip();
        //圆形切割-结束
        ctx.drawImage(featureMap.headImgUrl, 20, imgHeight + 20, 100, 100);
        ctx.restore();
        //二维码和文字
        ctx.setFontSize(16)
        ctx.setFillStyle('black')
        ctx.fillText('长按二维码', 50, imgHeight + 180)
        ctx.fillText('进入小程序查看更多', 50, imgHeight + 210)
        ctx.draw()
      }
      setTimeout(() => {
        this.canvasToImage()
      }, 200)
    },
    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: function(res) {
                            if (res.confirm) {
                                console.log('用户点击确定');
                            }
                            //that.hideShareImg()
                        }
                    })
                }
              })
          },
          fail:function (res) {
              console.log(res)
          }
        })
    }
  }

})