function generateImage(imageData, backgroundColor, width, height, quality, randomID, callback) {
console.log("ggggg", randomID);
const query = wx.createSelectorQuery();
query.select(`#${randomID}`).fields({ node: true, size: true }).exec((res) => {
console.log("xxxxxxxxxx", randomID);
if (!res[0] || !res[0].node) {
console.error('无法获取画布节点');
callback(null, '无法获取画布节点');
return;
}
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
// 设置画布逻辑尺寸
canvas.width = width;
canvas.height = height;
// 设置背景色
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, width, height);
// 创建 Image 对象并加载图像
const image = canvas.createImage();
image.onload = () => {
console.log("图片加载成功");
// 确保画布的宽高在 drawImage 之前已经被设置好
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
}
console.log("开始绘制");
ctx.drawImage(image, 0, 0, width, height);
console.log("结束绘制");
// 将画布内容导出为临时文件路径
wx.canvasToTempFilePath({
canvas: canvas,
quality: quality, // 控制图像质量
success: (res) => {
const tempFilePath = res.tempFilePath;
console.log("生成成功:", tempFilePath);
// 销毁画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = 0;
canvas.height = 0;
callback(tempFilePath);
},
fail: (err) => {
console.error('生成临时文件失败:', err);
callback(null, '生成临时文件失败');
}
});
};
image.onerror = () => {
console.error('图片加载失败');
callback(null, '图片加载失败');
};
// 加载新图片
if (imageData.startsWith('data:image')) {
// 如果是 Base64 格式
console.log("加载 Base64 图片");
image.src = imageData;
} else {
// 如果是图片路径
console.log("加载图片路径");
image.src = imageData;
}
});
}
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。