- 当前 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 == ""
});

微信小程序开发问题解答