canvas生成的图片第一次保存会全部空白（透明？），第二次才正常。求解啊！！急得不要不要的！！

代码：

createPhoto: function() {

let that = this;

wx.showLoading({

title: '图片生成中',

})

// 获取背景图片本地路径

let promise1 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: that.data.bgi,

success: function(res) {

console.log(111, res)

resolve(res);

},

fail: function(res) {

reject(res)

}

})

})

// 获取顶部头像本地路径

let promise2 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: that.data.avatarUrl,

success: function(res) {

console.log(222, res)

resolve(res);

},

fail: function(res) {

reject(res)

}

})

})

// 获取底部自己头像本地路径

let promise3 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: that.data.avatarUrl2,

success: function(res) {

console.log(333, res)

resolve(res);

},

fail: function(res) {

reject(res)

}

})

});

// 获取底部第一个头像本地路径

let promise4 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: that.data.beforeAvatar,

success: function(res) {

console.log(444, res)

resolve(res);

},

fail: function(res) {

reject(res)

}

})

});

// 获取底部第二个头像本地路径

let promise5 = new Promise(function(resolve, reject) {

wx.getImageInfo({

src: that.data.afterAvatar,

success: function(res) {

console.log(555, res)

resolve(res);

},

fail: function(res) {

reject(res)

}

})

});

// 获取皇冠本地路径

let promise6 = new Promise(function (resolve, reject) {

wx.getImageInfo({

src: "https://dreamate.top/2.png",

success: function (res) {

console.log(666, res)

resolve(res);

},

fail: function (res) {

reject(res)

}

})

});

// 执行

Promise.all(

[promise1, promise2, promise3, promise4, promise5, promise6]

).then(res => {

console.log(res)

// 获取宽高

let wW = that.data.windowWidth;

let wH = that.data.windowHeight;

// 定义画布上下文常量

const ctx = wx.createCanvasContext('firstCanvas');

//背景白色

ctx.setFillStyle('white');

//从x=0,y=0开始绘制白色

// ctx.fillRect(0, 0, wW, wH);

if (that.data.ranking == 1) {

console.log(111)

//背景图

ctx.drawImage(res[0].path, 0, 0, wW, wH);

//顶部头像

ctx.drawImage(res[1].path, 10, 5, 90, 85);

//底部第一张头像

ctx.drawImage(res[2].path, 67, 560, 70, 70);

//底部第二张头像

ctx.drawImage(res[3].path, 177, 560, 55, 55);

//底部第三张头像

ctx.drawImage(res[4].path, 267, 560, 55, 55);

//皇冠

ctx.drawImage(res[5].path, 90, 545, 30, 30);

// 绘制文字

ctx.setFontSize(20)

ctx.setFillStyle("#fff")

ctx.fillText(that.data.userName, 100, 50)

// 绘制文字

ctx.setFontSize(26)

ctx.setFillStyle("#000")

ctx.fillText(that.data.ranking, wW * 0.49, wW * 1.38)

/*保存上下文 绘制 */

// ctx.save();

ctx.draw();

//destWidth值越大图片越清晰/大小成正比 解决画布模糊的问题

wx.canvasToTempFilePath({

canvasId: 'firstCanvas',

width: wW,

height: wH,

destWidth: wW * 3,

destHeight: wH * 3,

success: function success(res) {

console.log('转图片结果');

// 关闭loading

wx.hideLoading();

wx.showLoading({

title: '图片保存中...',

})

// 到page对象的data中

that.setData({

previewImageUrl: res.tempFilePath

})

console.log(res)

wx.saveImageToPhotosAlbum({

filePath: that.data.previewImageUrl,

success(res) {

wx.hideLoading();

wx.showToast({

title: '保存成功！',

icon: 'success'

})

//保存成功

console.log(res);

},

fail: function (res) {

wx.showToast({

icon: 'fail',

title: 'sorry 保存失败,请稍后再试',

})

return;

}

})

},

complete: function complete(e) {

console.log(e.errMsg);

}

});

}

}).

catch(err => {

//error 错误处理

})

},