头像和二维码第一次点击按钮制作显示图像的时候不显示出来，点击第二次才显示出来

//显示名片预览

that.setData({

showMyImg: true,

});

let ctx = wx.createCanvasContext(‘shareImg’)

let canvasW = 290

let canvasH = 460

let radiusR = 5

//白背景

ctx.beginPath()

ctx.arc(radiusR, radiusR, radiusR, 1 * Math.PI, 1.5 * Math.PI)

ctx.lineTo(canvasW - radiusR, 0)

ctx.arc(canvasW - radiusR, radiusR, radiusR, 1.5 * Math.PI, 0)

ctx.lineTo(canvasW, canvasH - radiusR)

ctx.arc(canvasW - radiusR, canvasH - radiusR, radiusR, 0, 0.5 * Math.PI)

ctx.lineTo(radiusR, canvasH)

ctx.arc(radiusR, canvasH - radiusR, radiusR, 0.5 * Math.PI, 1 * Math.PI)

ctx.closePath()

ctx.setFillStyle(’#ffffff’)

ctx.fill()

//渐变背景

ctx.beginPath()

ctx.arc(radiusR, radiusR, radiusR, 1 * Math.PI, 1.5 * Math.PI)

ctx.lineTo(canvasW - radiusR, 0)

ctx.arc(canvasW - radiusR, radiusR, radiusR, 1.5 * Math.PI, 0)

ctx.lineTo(canvasW, 200)

ctx.lineTo(0, 200)

ctx.closePath()

let grd = ctx.createLinearGradient(0, 0, canvasW, 0)

grd.addColorStop(0, ‘#f39800’)

grd.addColorStop(1, ‘#e85b00’)

ctx.setFillStyle(grd)

ctx.fill()

// ctx.setGlobalAlpha(0.3)

// ctx.setFillStyle(’#ff3300’)

// ctx.fillRect(188, 20, 55, 19)

// ctx.fillRect(15, 40, 80, 19)

// ctx.fillRect(200, 88, 80, 19)

// ctx.fillRect(35, 115, 55, 19)

// ctx.setGlobalAlpha(1)

ctx.setFillStyle(’#ffffff’)

ctx.setFontSize(12)

if(artisans_skill[0]){

ctx.fillText(artisans_skill[0][‘name’], 19, 54)

}else{

ctx.fillText(‘免费使用’, 19, 54)

}

if (artisans_skill[1]){

ctx.fillText(artisans_skill[1][‘name’], 192, 34)

}else{

ctx.fillText(‘收录附近师傅’, 192, 34)

}

ctx.fillText(‘预约上门服务’, 25, 129)

ctx.fillText(‘在线宣传’, 204, 102)

//添加头像

ctx.beginPath()

ctx.arc(canvasW / 2, 94, 45, 0, 2 * Math.PI)

ctx.setFillStyle(’#ffffff’)

ctx.fill()

ctx.save()

ctx.beginPath()

ctx.arc(canvasW / 2, 94, 45, 0, 2 * Math.PI)

ctx.setLineWidth(3)

ctx.setStrokeStyle(’#ffffff’)

ctx.stroke()

ctx.clip()

ctx.drawImage(useImageUrl, canvasW / 2 - 45, 49, 90, 90)

ctx.restore()

ctx.setFillStyle(’#ffffff’)

ctx.setFontSize(16)

ctx.setTextAlign(‘center’)

ctx.fillText(that.data.username, canvasW/2, 170)

ctx.setFillStyle(’#fad699’)

ctx.fillRect(0, 200, canvasW, 10)

ctx.setFillStyle(’#fdefd9’)

ctx.fillRect(0, 210, canvasW, 10)

ctx.setFillStyle(’#ff6600’)

ctx.setFontSize(18)

ctx.setTextAlign(‘center’)

ctx.fillText(‘XXXXXXX’, canvasW/2, 250)

ctx.setFillStyle(’#555555’)

ctx.setFontSize(14)

ctx.fillText(‘扫描二维码就能找到我’, canvasW/2, 280)

ctx.fillText(‘欢迎预约服务’, canvasW/2, 300)

ctx.drawImage(QrMiniPath, 102, 320, 85, 85)

ctx.setFillStyle(’#777777’)

ctx.setFontSize(12)

ctx.fillText(‘长按识别二维码’, canvasW/2, 430)

setTimeout(function(){

ctx.draw(false, function () {

that.saveCanvasImage();

});

},1000)

},

//头像图片暂存

downLoadImg: function() {

const that =this;

wx.getImageInfo({

src: that.data.userInfoAvatar,

success: function (res) {

wx.setStorage({

key: ‘userinfoImage’,

data: res.path,

});

},

fail:function(res){

wx.showModal({

title: ‘头像获取失败或未设置’,

content: ‘头像获取失败，请稍后再试。’,

showCancel: false,

})

}

}),

useImageUrl = wx.getStorageSync(‘userinfoImage’)

},

//点击我的名片

creatInfoCard: function() {

wx.showLoading({

title: ‘生成中’,

})

const that = this;

//暂存头像

setTimeout(function(){

that.downLoadImg();

},1000)

//暂存二维码

setTimeout(function(){

that.downLoadQr();

},1000)

//开始绘制名片

setTimeout(function () {

that.creatInfoCardNext();

}, 2000)

},