• 当前 Bug 的表现（可附上截图）

canvas 生成图片后，在image标签展示展示生成的图片在安卓大概率出现黑屏

图片的获取都成功了，将canvas 组件显示出来发现画的是没有问题的，但是获取的图片展示确实黑色的。获取图片的方法已经延时2s。

• 预期表现

• 复现路径

• 提供一个最简复现 Demo

var widthPercent = this.data.getSystemInfo.windowWidth / 375;

var that = this

let ctx = wx.createCanvasContext(‘ewmCanvas’);

// 画背景图片

let bgimageurl = that.data.sharemsg.picInfo.picUrl

canvas.getImageInfo(bgimageurl, function (res) {

console.log(“图片1”,res)

// ctx.save()

ctx.drawImage(res.path, 0, 0, 345 * widthPercent, 255 * widthPercent)

// ctx.restore()

// 画头像

let iconimageUrl = that.userInfo.imageUrl

canvas.getImageInfo(iconimageUrl, function (res) {

console.log(“图片2”, res)

ctx.save()

ctx.arc(40 * widthPercent, 40 * widthPercent, 20, 0, Math.PI * 2, false);

ctx.clip();

ctx.drawImage(res.path, 20 * widthPercent, 20 * widthPercent, 40 * widthPercent, 40 * widthPercent)

ctx.restore()

// 设置昵称

ctx.save();

ctx.setFontSize(16 * widthPercent)

ctx.setFillStyle(‘rgb(255, 255, 255)’)

ctx.fillText(that.userInfo.name, 70 * widthPercent, 46 * widthPercent)

ctx.restore()

// 设置文字标题  

ctx.save();

ctx.setFontSize(28 * widthPercent)

ctx.setTextAlign(‘center’)

ctx.setFillStyle(‘rgb(255, 255, 255)’)

ctx.setShadow(1, 1, 3, ‘rgba(0, 0, 0, 0.2)’)

ctx.fillText(that.data.sharemsg.picInfo.title, 172.5 * widthPercent, 235 * widthPercent)

ctx.restore()

//设置底部白色背景

ctx.save();

ctx.beginPath()

ctx.rect(0, 255 * widthPercent, 345 * widthPercent, 90 * widthPercent)

ctx.setFillStyle(’#ffffff’)

ctx.fill()

ctx.restore()

// 设置二维码

var ewmImageUrl = that.data.sharemsg.picInfo.codeUrl

canvas.getImageInfo(ewmImageUrl, function (res) {

console.log(“图片3”, res)

// ctx.save()

ctx.drawImage(res.path, 10 * widthPercent, 260 * widthPercent, 80 * widthPercent, 80 * widthPercent)

// ctx.restore()

//设置顶部说明

ctx.save()

ctx.font = ‘normal bold 18px sans-serif’;

ctx.setFontSize(18 * widthPercent)

ctx.setFillStyle(‘rgb(51, 51, 51)’)

// ctx.setTextAlign(‘center’)

ctx.fillText(that.data.sharemsg.picInfo.codeTitle, 98 * widthPercent, 294 * widthPercent)

ctx.restore()

// 底部说明

ctx.setFontSize(16 * widthPercent)

ctx.setFillStyle(‘rgb(102, 102, 102)’)

ctx.fillText(that.data.sharemsg.picInfo.codeSubTitle, 98 * widthPercent, 322 * widthPercent)

ctx.draw(false,function(){

setTimeout(function(){

canvas.canvasToTempFilePath(‘jpg’, ‘ewmCanvas’, function (res) {

wx.hideToast()

var url = res.tempFilePath;

if (that.data.shareimageUrl == “set”) {

that.data.sharemsg.show = true

that.setData({

sharemsg: that.data.sharemsg,

shareimageUrl: url,

})

} else {

that.setData({

shareimageUrl: url,

})

}

})

},2000)

})

},function(res){

that.data.shareimageUrl == “”

})

}, function (res) {

that.data.shareimageUrl == “”

});

}, function (res) {

that.data.shareimageUrl == “”

});