...
//前面的canvas绘制图片流程是正常的(将canvas节点展示到可视区域调试过了)
ctx.draw(false, () => {
setTimeout(() => {
_this.generateImage()
},3000)
})
//核心转换方法
generateImage(){
let _this = this;
wx.nextTick(() => {
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
fileType: 'jpg', // 改用JPG格式
// quality: 0.8, // 适当降低质量
x:0,
y:0,
destWidth: _this.data.cw, // 明确设置输出尺寸
destHeight: _this.data.ch,
success: async (res) => {
...// res.tempFilePath;这里返回的图片上传到后台后,回显发现是个纯黑色底图片,什么信息都没有。这个问题目前只出现在鸿蒙系统的手机上
//用户反馈,问题出现在鸿蒙系统的最新版本微信上
},
}, _this)
})
}
这个问题不止一个用户遇到了,目前反馈到我这里的有两个用户,且操作系统都是鸿蒙5.1.0这个版本号,微信版本号都为:1.0.9。用户反馈都是在升级了微信最新版本后遇到这个问题。其中有一个客户已经提交了日志,但是智能客服一直不回复(微信这智能客服功能回复也太慢了)
后续:当前解决方案,重构成canvas2d;
async toWaterImg(main){
const tempFilePath = main.file;
const imgInfo = await this.getImageInfo(tempFilePath);
const MAX_SIZE = 600;
let canvasWidth = imgInfo.width;
let canvasHeight = imgInfo.height;
if (canvasWidth > MAX_SIZE || canvasHeight > MAX_SIZE) {
const ratio = Math.min(MAX_SIZE / canvasWidth, MAX_SIZE / canvasHeight);
canvasWidth = Math.floor(canvasWidth * ratio);
canvasHeight = Math.floor(canvasHeight * ratio);
}
await new Promise(resolve => {
this.setData({ cw: canvasWidth, ch: canvasHeight }, resolve);
});
//水印流程
await this.drawFullImage(tempFilePath);
//转换成base64文件
const dataUrl = canvas.toDataURL('image/jpg');
//再将base64转换成本地文件路径
const tempPath = await this.base64ToTempPath(dataUrl);
//压缩流程,如果不需要压缩的,可以直接前面tempPath上传
const nTpath = await this.testCompress(tempPath);
// wx.getFileSystemManager().getFileInfo({
// filePath: nTpath,
// success: (info) => {
// const sizeKB = (info.size / 1024).toFixed(2);
// console.log(`文件大小: ${sizeKB} KB`);
// }
// });
//上传流程
await this.addFile(nTpath);
//销毁实例
await this.destoryCvs();
},
// 获取图片信息
getImageInfo(filePath) {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: filePath,
success: (res) => resolve(res),
fail: (err) => reject(err)
});
});
},
//base64转换为本地文件路径
base64ToTempPath(base64Data) {
return new Promise((resolve, reject) => {
// 1. 提取纯Base64数据(移除头部信息)
const base64Str = base64Data.replace(/^data:image\/\w+;base64,/, '');
// 2. 将Base64转换为ArrayBuffer
const arrayBuffer = wx.base64ToArrayBuffer(base64Str);
// 3. 生成唯一文件名
const filePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.png`;
console.log(filePath)
// 4. 写入文件
wx.getFileSystemManager().writeFile({
filePath,
data: arrayBuffer,
encoding: 'binary',
success: () => resolve(filePath),
fail: (err) => reject('写入失败:' + err.errMsg)
});
})
},
用户已知问题 预计本周修复
我们这边也是,每天上万用户,无法正常使用,目测这个问题很长时间了,希望官方重视
看来遇到这个BUG的同道不少。目前可以确定的是鸿蒙系统5.1.0+鸿蒙特供微信版本1.0.9必现这个BUG。当前我的解决方案是推翻原来的canvas组件以及绘制流程,重构成canvas2D方案和流程。好消息是这两种后者比前者api版本更新,可能在支持度上,比前者更好。同时,最重要的事,重构过程比较丝滑,主要是canvas对象实例的注册获取,以及ctx对象的操作语法有区别,相对应的改一下就可以了,整体业务流程大差不差,有特别需求差异的,建议问一下AI工具。祝大家开发顺利。
ps:微信这帮人对自己的api都不测试的嘛,特别是在新的操作系统上的适配问题,简直无语
什么时候修复这个bug