canvas裁切头像

#canvas画圆形图片

brandPosster () {

var diff1=60,diff2=30

let data = this.data.info

let ctx = wx.createCanvasContext('c', this)

let arr = [`${this.data.OSS_URL}/poster-bg.png`, data.logo, `${this.data.qrcode}`]

ctx.fillStyle = '#ffffff'

ctx.fillRect(0, 0, 680, 980)

this.downLoadImg(arr, 0, () => {

let imgs = this.data.imgs

// 背景图

ctx.drawImage(imgs[0], 10, 10, 660, 749)

// logo

ctx.save()

ctx.beginPath()

ctx.arc(340, 280 - diff1, 77, 0, Math.PI * 2, false);

ctx.stroke()//这个一定要有 不然图片不裁剪

ctx.clip()

ctx.drawImage(imgs[1], 263, 203 - diff1, 154, 154)

ctx.restore()

//自己公司logo

ctx.drawImage(this.data.OSS_URL + '/companyLogo.png', 220, 658 - diff2, 84, 84)

//x按钮

ctx.drawImage(this.data.OSS_URL + '/closeIcon.png', 330, 690 - diff2, 18, 18)

//合作品牌logo

ctx.save()

ctx.beginPath()

ctx.arc(420, 700 - diff2, 42, 0, Math.PI * 2, false);

ctx.stroke()//这个一定要有 不然图片不裁剪

ctx.clip()

ctx.drawImage(imgs[1], 378, 658 - diff2, 84, 84)

ctx.restore()

// 小程序码

ctx.drawImage(imgs[2], 40, 800, 140, 140)

// foot文字

ctx.font = '22px Arial'

ctx.fillStyle = '#ABAEB6'

ctx.fillText('长按识别小程序', 211, 862)

ctx.fillText(`了解${data.name}与NPLUS的共创作品案例`, 211, 900)

// 客户名称

ctx.font = 'bold 40px Arial'

ctx.fillStyle = '#fff'

ctx.textAlign = 'center'

ctx.fillText(data.name, 340, 450 - diff1)

// 客户简介

ctx.font = '26px Arial'

ctx.fillStyle = 'rgba(255,255,255,0.8)'

// ctx.fillText(data.detail, 340, 590)

this.drawText(ctx, data.detail)

ctx.draw(true, () => {

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: 680,

height: 980,

destWidth: 680,

destHeight: 980,

canvasId: 'c',

fileType: 'jpg',

quality: 1,

success: (res) => {

this.setData({

poster: res.tempFilePath

})

wx.hideLoading()

}

}, this)

})

})

},