救救孩子,被甲方催死了。给各位大佬磕头了,哐哐哐!
在canvas创建了一个背景,在上面填充了文字,图片,二维码,图片和二维码都是用wx.getImageInfo画的,文字和二维码在canvas里正常显示,头图怎么都出不来,编辑器和真机上都显示不出。没有报错。
// 绘制头图
if (favImg && favImg.length > 0) { wx.getImageInfo({ src: favImg, success(re) { console.log(re) let Path = re.path; context.drawImage(Path, 35, 35, 930, 524) }, fail(re) { } }) } // 绘制二维码 var qrcode = "https: //www.xxxx.com/wp-content/xxx/xxx/card-165.jpg" if (qrcode && qrcode.length > 0) { wx.getImageInfo({ src: qrcode, success(re) { context.drawImage(re.path, 803, 760, 165, 165) context.setTextAlign( 'right' ) context.setFillStyle( '#000000' ) context.font = "regular 23px PingFang"; context.fillText( 'xxxxxx' , 965, 965, 930) context.draw( false , () => { that.saveCanvas() }) wx.hideLoading() } }) } else { context.draw( false , () => { that.saveCanvas() }) wx.hideLoading() } } }, |
头图wx.getImageInfo返回的数据也没问题
啊,解决了,getImageInfo是异步,因为图片大,还是从其他服务器下载的,所以耗时稍微长了一点,在下面context.draw的时候图片还没画上去,加一个判断确保他画完了就好。
var
status = 0
// 绘制头图
if
(favImg && favImg.length > 0) {
wx.getImageInfo({
src: favImg,
success(re) {
let path = re.path;
context.drawImage(path, 35, 35, 930, 524)
status = status + 1
if
(status == 2) {
context.draw(
false
, () => {
that.saveCanvas()
})
}
},
fail(re) {
}
})
}
// 绘制二维码
if
(qrcode && qrcode.length > 0) {
wx.getImageInfo({
src: qrcode,
success(re) {
context.drawImage(re.path, 803, 760, 165, 165)
context.setTextAlign(
'right'
)
context.setFillStyle(
'#000000'
)
context.font =
"regular 23px PingFang"
;
context.fillText(
'xxxx'
, 965, 965, 930)
status = status + 1
if
(status == 2){
context.draw(
false
, () => {
that.saveCanvas()
})
}
}
})
}
代码给大家参考一下,以为无法判断哪个图片是最后绘制好的,所以用了这个笨笨的判断方法