问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 微信小程序 Bug wx.createCanvasContext 客户端 6.7.2 2.3.2 [181]

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 错误处理
})
},

微信小程序开发问题解答