reader/component/share/share.js

// component/shar-dialog/shar-dialog.js
import httpRequestApi from '../../utils/APIClient';
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    shareType: {
      type: 'String',
      value: ''
    },
    shareId: {
      type: 'String',
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    shareFlag: false,
    imgUrls: '',
    avatar: '',
    author: '',
    iconImg: '',
    title: '',
    path: '',
    QRCodeImagePath: '',
    QRCodeImageLocalPath: '',
    groupPurchaseInfo: {}
  },

  /**
   * 组件的方法列表
   */
  methods: {
    poster: function () {
      const that = this;
      const ctx = wx.createCanvasContext('myCanvas');
      // 先画背景
      this.drawBg(ctx)
        .then(() => {
          // 下载保存图片
          console.log('背景画完');
          return this.saveImg(ctx);
        })
        .then(() => {
          // 画头像和作者||发起者
          console.log('头像画完');
          return this.drawAuthor(ctx);
        })
        .then(() => {
          console.log(this.data.shareType)
          if (this.data.shareType === 'works') {
            // 分享作品的主题内容
            console.log('主题画完');
            return this.drawWorksGut(ctx)
          } else {
            return this.drawGroupGut(ctx)
          }
        })
        .then(() => {
          wx.getImageInfo({
            src: this.data.QRCodeImagePath, //服务器返回的图片地址
            success: function (res) {
              console.log('下载content成功1')
              console.log(res.path)
              //res.path是网络图片的本地地址
              ctx.drawImage(res.path, 213, 445, 126, 126);
              // ctx.drawImage('../../../static/image/works_poster.png', 0, 0, 375, 667); //插入图片  



              console.log('下载content成功2')
              ctx.draw(true, function (res) {
                wx.canvasToTempFilePath({
                  x: 0,
                  y: 0,
                  width: 750,
                  height: 1334,
                  // destWidth: 370,
                  destWidth: 1500,
                  // destHeight: 507,
                  destHeight: 2668,
                  canvasId: 'myCanvas',
                  success: (res) => {
                    console.log(res.tempFilePath)
                    // wx.saveImageToPhotosAlbum({
                    //   filePath: res.path,
                    //   success(res) {
                    //     console.log(res);
                    //   }
                    // })
                    that.setData({
                      imgUrls: res.tempFilePath
                    }, () => {
                      wx.hideLoading();
                    })
                  },
                  fail: (res) => {
                    console.log(res)
                  }
                })
              })
              console.log('下载content成功3')



            },
            fail: function (res) {
              //失败回调
            }
          });
        })




    },
    share: function (data) {
      if (this.data.shareType === 'works') {

        this.setData({
          shareFlag: !this.data.shareFlag,
          avatar: data.avatar,
          author: data.author,
          iconImg: data.iconImg,
          title: data.title,
          // path: data.path,
          QRData: {
            page: data.path,
            scene: data.scene,
            qrCodeId: this.data.shareId
          }
        })

      }
      if (this.data.shareType === 'group') {
        console.log('团购分享')
        this.setData({
          shareFlag: !this.data.shareFlag,
          avatar: data.avatar,
          author: data.author,
          iconImg: data.iconImg,
          title: data.title,
          // path: data.path,
          QRData: {
            page: data.path,
            scene: data.scene,
            qrCodeId: this.data.shareId
          },
          groupPurchaseInfo: data.groupPurchaseInfo
        })
      }
      if (this.data.shareType === 'class') {
        console.log('课程分享')
        this.setData({
          shareFlag: !this.data.shareFlag
        })
      }
    },
    //关闭弹框
    close: function (e) {
      console.log(e)
      this.setData({
        shareFlag: !this.data.shareFlag,
        imgUrls: ''
      })
    },
    nothing: function (e) {
      return
    },
    // 保存图片到本地
    saveImg: function () {
      console.log('yibuububu')
      let download = new Promise((resolve, reject) => {
        let QRCode = () => {
          // 生成二维码并下载
          httpRequestApi.createQRCode(this.data.QRData).success(res => {
            // let base64 = wx.arrayBufferToBase64(res.data);
            // console.log(a)
            this.setData({
              QRCodeImagePath: res.data.data
            })
            // wx.downloadFile({
            //   url: res,
            //   success: (res) => {
            //     console.log(res)
            //     console.log('下载二维码成功')
            //     // this.setData({
            //     //   avatar: res.tempFilePath
            //     // }, () => {

            //     // })

            //   }
            // });
            console.log(this.data.QRCodeImagePath)
            console.log(res)
            resolve();
          })
        }
        let downAvatar = () => {
          wx.downloadFile({
            url: this.data.avatar,
            success: (res) => {
              console.log('下载头像成功')
              console.log(this.data.avatar)
              this.setData({
                avatar: res.tempFilePath
              }, () => {
                QRCode();
              })

            }
          });
        }

        // resolve(()=>{
        // 下载icon
        wx.downloadFile({
          url: this.data.iconImg,
          success: (res) => {
            console.log('下载icon成功')
            console.log(this.data.iconImg)
            this.setData({
              iconImg: res.tempFilePath
            }, () => {
              // 下载头像
              downAvatar();
            })

          }
        });
      })
      return download;
    },
    // 先画出背景
    drawBg: function (ctx) {
      let background = new Promise((resolve, reject) => {
        wx.showLoading({
          title: '海报生成中',
          mask: true
        })
        console.log('开始画背景')
        // ctx.rect(0, 0, 375, 667)
        // ctx.setFillStyle('#fff')
       
        ctx.drawImage('../../../static/image/works_poster.png', 0, 0, 1500, 2668,0,0,750,1334); //插入图片  

        // ctx.fill()
        ctx.save()
        ctx.beginPath()
        // ctx.setFillStyle('#fff')
        ctx.fill()
      
        resolve();
      });
      return background;
    },
    // 画头像和作者||发起者
    drawAuthor: function (ctx) {

      let author = new Promise((resolve, reject) => {
        // resolve(() => {
        console.log('开始画头像')
        console.log(this.data.avatar)
        ctx.arc(51.5, 200.5, 35.5, 0, 2 * Math.PI, false) 
        ctx.clip(); //剪切头像区域
        ctx.drawImage(this.data.avatar, 16, 150, 87, 87); //插入图片  
        // ctx.fill()
        ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
        ctx.setFontSize(18)
        // ctx.setFillStyle('#535353')
        ctx.setFillStyle('#535353')
        ctx.fillText(this.data.author, 98, 180)
        
        // })
        resolve();
      })
      return author;
    },
    // 分享作品的主题内容
    drawWorksGut: function (ctx) {
      let works = new Promise((resolve, reject) => {
        // resolve(() => {
        console.log('开始画内容')
        ctx.setFontSize(16)
        ctx.setFillStyle('#000')
        ctx.fillText('已使出洪荒之力，声情并茂的为课文', 90 ,198)
        ctx.fillText(`配了一段惊世之作`,  90, 240)
        // ctx.setFontSize(16)
        // ctx.setFillStyle('red')
        ctx.fillText(`《${this.data.title}》`, 90, 220)
        
        ctx.drawImage('../../../static/image/reading_poster.jpg', 11, 276, 351, 145);
        ctx.setFontSize(16)
        ctx.setFillStyle('#000')
        // ctx.setFillStyle('#000')
        ctx.setFontSize(16)
        ctx.setFillStyle('#c90000')
        ctx.fillText('为TA疯狂打CALL', 12, 495)
        ctx.setFontSize(14)
        ctx.setFillStyle('#666666')
        ctx.fillText('长按识别二维码，快去听听', 12, 530)
        // })
        resolve();
      })
      return works;
    },

    // 分享团购的主体内容
    drawGroupGut: function (ctx) {
      let group = new Promise((resolve, reject) => {
        //resolve(() => {
        ctx.fillText('郎朗读书声是世上最美的声音', 50, 138)
        ctx.drawImage(this.data.iconImg, 9, 205, 352, 145);
        ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
        ctx.setFontSize(14)
        // ctx.setFillStyle('#fff')
        ctx.fillText(`${this.data.groupPurchaseInfo.headcount}人团`, 149, 373)
        ctx.setFontSize(16)
        ctx.setFillStyle('#A95A00')
        ctx.fillText('原价', 20, 373)
        ctx.setStrokeStyle('red')
        ctx.moveTo(64, 368)
        ctx.lineTo(114, 368)
        ctx.stroke()
        ctx.fillText(`￥${parseFloat(this.data.groupPurchaseInfo.originPrice / 100).toFixed(2)}元`, 54, 373)
        ctx.setFontSize(18)
        ctx.fillText('团购价仅需', 20, 403)
        ctx.fillText('元', 185, 403)
        ctx.setFontSize(20)
        ctx.setFillStyle('red')
        ctx.fillText(`￥${parseFloat(this.data.groupPurchaseInfo.price / 100).toFixed(2)}`, 115, 403)
        ctx.drawImage('../../../static/groupImg/share_bottom.png', 3, 419, 370, 192);
        ctx.setFontSize(20)
        ctx.setFillStyle('red')
        ctx.fillText('名额有限，售完截止', 9, 467)
        ctx.setFontSize(18)
        ctx.setFillStyle('#000')
        ctx.fillText('长按识别二维码参加团购', 9, 493)
        //})
        resolve();
      })
      return group;
    },


    // 保存最终图片
    PreservationImg: function () {
      wx.saveImageToPhotosAlbum({
        filePath: this.data.imgUrls,
        success: (res) => {
          console.log(res)
          this.setData({
            imgUrls: false
          })
        }
      })
    },
    shareFriend: function () {
      this.triggerEvent('customevent', {})
    }
  },
  onShareAppMessage: (res) => {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: this.data.title,
      path: this.data.path
    }
  },
})