reader/component/share/share.js

// component/shar-dialog/shar-dialog.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    shareType: {
      type: 'String',
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    shareFlag: true,
    imgUrls: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    poster: function () {
      const that = this;
      const ctx = wx.createCanvasContext('myCanvas');
      ctx.rect(0, 0, 370, 507)
      ctx.setFillStyle('#fff')
      ctx.fill()
      ctx.save()
      ctx.beginPath()
      ctx.setFillStyle('#fff')
      ctx.fill()
      ctx.arc(185, 48, 37, 0, 2 * Math.PI, false)
      ctx.clip();//画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内  
      ctx.drawImage('../../../static/groupImg/Bitmap1.png', 148, 8, 100, 100);   //插入图片  
      ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
      ctx.setFontSize(20)
      ctx.setFillStyle('#000')
      ctx.fillText('喔喔', 166, 115)
      ctx.setFillStyle('#FF4400')
      ctx.fillText('郎朗读书声是世上最美的声音', 50, 138) 
      ctx.drawImage('../../../static/groupImg/Bitmap1.png', 9, 156, 352, 145);  
      ctx.setFontSize(18)
      ctx.setFillStyle('#000')
      ctx.fillText('一年级语文上学期', 12, 329)
      ctx.drawImage('../../../static/groupImg/Combined Shape.png', 11, 348, 196, 65);
      ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
      ctx.setFontSize(14)  
      ctx.setFillStyle('#fff')
      ctx.fillText('五人团', 149, 373) 
      ctx.setFontSize(16)  
      ctx.setFillStyle('#A95A00')
      ctx.fillText('原价', 24, 373)
      ctx.setStrokeStyle('red')
      ctx.moveTo(64, 368)
      ctx.lineTo(114, 368)
      ctx.stroke()
      ctx.fillText('￥99元', 64, 373)
      ctx.setFontSize(18)
      ctx.fillText('团购价仅需', 20, 403)
      ctx.fillText('元', 144, 403)
      ctx.setFontSize(20)  
      ctx.setFillStyle('red')
      ctx.fillText('￥1', 109, 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)
      ctx.drawImage('../../../static/groupImg/code.png', 217, 374, 135, 135);
      ctx.draw(true, function (res) {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 370,
          height: 507,
          destWidth: 370,
          destHeight: 507,
          canvasId: 'myCanvas',
          success:(res) => {
              console.log(res.tempFilePath)
              // wx.saveImageToPhotosAlbum({
              //   filePath: res.path,
              //   success(res) {
              //     console.log(res);
              //    }
              // })
              that.setData({
                imgUrls: res.tempFilePath
              })
          }
        })
      })
    },
    share: function () {
      this.setData({
        shareFlag: !this.data.shareFlag
      })
    },
    PreservationImg: function () {
      wx.saveImageToPhotosAlbum({
        filePath: this.data.imgUrls,
        success(res) { 
          console.log('保存成功')
        }
      })
    },
    shareFriend: function () {
      this.triggerEvent('customevent', {})
    }
  }
})