头像和二维码第一次点击按钮制作显示图像的时候不显示出来,点击第二次才显示出来
//显示名片预览
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)
},
canvas中很多操作是异步执行,把异步改为同步就好了。或者用别人写好的组件吧
能提供个代码片段吗?
代码执行顺序问题,改成同步的,导出图片可以加300毫秒延时
还是不行的