canvas draw multi line text and circle avatar

gistfile1.txt

public async drawActivityPoster() {
    const {windowWidth} = wx.getSystemInfoSync()
    const width = windowWidth * 80 / 100
    const ctx = wx.createCanvasContext('poster')
    this.drawText({
      text: '我的店铺',
      ctx :ctx,
      x: 0,
      y: 100,
      fontSize: 14,
      color: '#333',
      windowWidth: width,
      align: 'center'
    })

    this.drawText({
      text: '福利多多，快来看看',
      ctx :ctx,
      x: 0,
      y: 120,
      fontSize: 12,
      color: '#999',
      windowWidth: width,
      align: 'center'
    })

    try {
      const qrcode = await this.getImage('http://file.baixing.net/201808/4212f2276fd9239342c94ac4bc5e5818.jpeg')
      ctx.drawImage(qrcode.path, (width - 110) / 2, 360, 110, 110)
    } catch (e) {
      console.log(e)
    }

    const bg = await this.getImage('http://file.baixing.net/201808/d52a9e248809eac3d62eeed1000a2f64.png')
    ctx.beginPath()
    const scale = (width - 20) / bg.width
    ctx.drawImage(bg.path, 10, 130, width - 20 , bg.height * scale)
    ctx.closePath()

    this.drawText({
      text: '分享本店铺至5个群分享本店铺即',
      ctx :ctx,
      x: 0,
      y: 175,
      fontSize: 14,
      color: '#333',
      windowWidth: width,
      align: 'center'
    })

    this.drawText({
      text: '可免至5费获得小米耳机',
      ctx :ctx,
      x: 0,
      y: 195,
      fontSize: 14,
      color: '#333',
      windowWidth: width,
      align: 'center'
    })

    this.drawText({
      text: '时间：2018-5-30 至 2018-7-30',
      ctx :ctx,
      x: 0,
      y: 215,
      fontSize: 12,
      color: '#999',
      windowWidth: width,
      align: 'center'
    })

    this.drawMultiLintText({
      text: '新店开张好礼送不停！即日起，您只需动动手指转发本店铺至5个微信群，并保存截图转发店小二（店小二微信号：12345678）即可存截图转发店小二…',
      x: 10,
      y: 280,
      width: width,
      ctx: ctx,
      fontSize: 12,
      color: '#999',
    })

    this.drawText({
      text: '长按识别小程序，查看活动详情',
      ctx: ctx,
      x: 10,
      y: 490,
      fontSize: 12,
      color: '#999',
      windowWidth: width,
      align: 'center'
    })

    await this.drawAvatar({
      ctx: ctx,
      canvasWidth: width,
      src: 'http://img-weapp.baixing.net/FrH-uJ5JIAk2vLC_0x8tB1SQcXNs_240p',
      width: 30
    })
    ctx.draw()
    wx.hideLoading()
  }
  public async drawPoster() {
    const {windowWidth} = wx.getSystemInfoSync()
    const width = windowWidth * 80 / 100
    const ctx = wx.createCanvasContext('poster')
    const image2 = await this.getImage('http://img-weapp.baixing.net/Fp1Oqt2D8vukVWBpHnlfgtWl-4JQ_640p')
	try {
      const qrcode = await this.getImage('http://file.baixing.net/201808/4212f2276fd9239342c94ac4bc5e5818.jpeg')
      ctx.drawImage(qrcode.path, (width - 120) / 2, 340, 120 , 120)
    } catch (e) {
      console.log(e)
    }
    ctx.drawImage(image2.path, 10, 140, width - 20 , 160)
    this.drawText({
      text: '我的店铺',
      ctx :ctx,
      x: 0,
      y: 100,
      fontSize: 14,
      color: '#333',
      windowWidth: width,
      align: 'center'
    })

    this.drawText({
      text: '我有一个非常好的宝贝，迫不及待分享给你',
      ctx :ctx,
      x: 0,
      y: 120,
      fontSize: 12,
      color: '#999',
      windowWidth: width,
      align: 'center'
    })
    //const image = await this.getImage('')
    this.drawText({
      text: '北京大吉普...',
      ctx :ctx,
      x: 10,
      y: 330,
      fontSize: 16,
      color: '#333',
      windowWidth: width,
      align: 'left'
    })
    this.drawText({
      text: '¥6000',
      ctx: ctx,
      x: 10,
      y: 330,
      fontSize: 16,
      color: '#FF8512',
      windowWidth: width,
      align: 'right'
    })
    this.drawText({
      text: '长按识别小程序，查看商品详情',
      ctx: ctx,
      x: 10,
      y: 480,
      fontSize: 12,
      color: '#999',
      windowWidth: width,
      align: 'center'
    })

    await this.drawAvatar({
      ctx: ctx,
      canvasWidth: width,
      src: 'http://img-weapp.baixing.net/FrH-uJ5JIAk2vLC_0x8tB1SQcXNs_240p',
      width: 30
    })
    ctx.draw()
    console.log('drawed')
    wx.hideLoading()
  }

  public drawText(option: {
      text: string,
      ctx: any,
      x: number,
      y: number,
      fontSize: number,
      color: string,
      windowWidth: number,
      align: string
  }) {
    const  {text,ctx, x, y, fontSize, color, windowWidth, align } = option
    ctx.beginPath()
    ctx.setTextAlign('left')
    ctx.setFontSize(fontSize)
    ctx.setFillStyle(color)
    const {width} = ctx.measureText(text)
    let left = x
    if (align === 'center') {
      left = (windowWidth - width) / 2
    } else if(align === 'left') {
      left = x
    } else if (align === 'right') {
      left = windowWidth - x - width
    }
    ctx.fillText(text, left , y)
    ctx.closePath()
  }

  public getImage(url: string) {
     return new Promise((resolve, reject) => {
       wx.getImageInfo({
         src: url ,
         success: function (image) {
           return resolve(image)
         },
         fail: function(err) {
           return reject(err)
         }
       })
     })
  }

  public drawMultiLintText(options: {
    text: string,
    x: number,
    y: number,
    width: number,
    ctx: any,
    fontSize: number,
    color: string
  }) {
    const {text, x, y, width, ctx, fontSize, color} = options
    ctx.setTextAlign('left')
    ctx.setFontSize(fontSize)
    ctx.setFillStyle(color)
    const w = ctx.measureText('e').width
    let lineNumber = 0
    let number = Math.floor((width - x * 2 )/ w)
    let rows = Math.ceil(text.length / number) * 2
    let currentRow = 0
    let top = y
    let word = []
    for(let i = 0 ; i < text.length; i++) {
      word.push(text[i])
      if(text.charCodeAt(i) > 255) {
        lineNumber += 2
      } else {
        lineNumber++
      }
      if (lineNumber > number || (i === text.length - 1 && currentRow === rows -1)) {
        let str = word.join('')
        word = []
        top += 20
        ctx.fillText(str, x , top)
        lineNumber = 0
        currentRow++
      }
    }
  }

  public async drawAvatar(options: {
    ctx: any,
    canvasWidth: number,
    src: string,
    width: number,
  }) {
    const {ctx,canvasWidth, src, width } = options
    ctx.beginPath()
    ctx.arc(canvasWidth / 2, width * 1.5 , width, 20, Math.PI * 2, true)
    ctx.closePath()
    ctx.setFillStyle('red')
    ctx.fill()
    ctx.clip()
    ctx.restore()
    const image = await this.getImage(src)
    console.log(image.path + '2')
    ctx.drawImage(image.path, canvasWidth / 2 - width, width / 2, width * 2, width * 2)
  }

  public saveCanvas() {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      canvasId: 'poster',
      success: function (res :any): void {
        wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res: any):void {
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 1500
              })
            },
            fail: function (e: any):void {
              console.log(e)
            }
        })
      },
      fail: function (e: any):void {
         console.log(e)
      }
    })
  }