收藏
回答

wx.canvasToTempFilePath在鸿蒙系统5.1.0版本上转换出来的图片是黑屏?

...
//前面的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)
      });
    })
  },
  
最后一次编辑于  08-26
回答关注问题邀请回答
收藏

5 个回答

  • 社区技术运营专员--Demons
    社区技术运营专员--Demons
    08-12

    用户已知问题 预计本周修复

    08-12
    有用 1
    回复 6
    • .
      .
      08-13
      预计周几修复嘞,我们这也有用户反馈类似的问题
      08-13
      1
      回复
    • LLL
      LLL
      08-15
      修复了吗?
      08-15
      回复
    • 一条路九十路
      一条路九十路
      08-19
      弄不好别上线啊,引导用户到小程序又有问题,跟huawei死磕到底不行么?
      08-19
      回复
    • LLL
      LLL
      08-22
      什么时候修复?
      08-22
      回复
    • 臻荣
      臻荣
      08-23
      有没有临时解决方案
      08-23
      回复
    查看更多(1)
  • 一条路九十路
    一条路九十路
    08-15

    我们这边也是,每天上万用户,无法正常使用,目测这个问题很长时间了,希望官方重视

    08-15
    有用 2
    回复
  • 智能回答 智能回答 本次回答由AI生成
    08-12
    有用 1
    回复 8
    • null
      null
      08-12
      手机型号:HUAWEl Pura 80;鸿蒙系统版本号为5.1.0;微信版本号为1.0.9;用户微信号:18696682980;日志上传时间为2025/08/12 09:10:00左右;问题出现操作时间为2025/08/12 07:14:00左右。
      08-12
      回复
    • 智能回答 智能回答 本次回答由AI生成
      08-12回复null
      1
    • null
      null
      08-12
      用户已经上传日志了:用户微信号:18696682980;日志上传时间为2025/08/12 09:10:00左右;
      08-12
      回复
    • null
      null
      08-12
      日志有没有收到?问题大概多久能解决?用户还等着呢,你们这是把开发者架在火上烤啊
      08-12
      1
      回复
    • .
      .
      08-15回复null
      hello,你们解决了嘛
      08-15
      回复
    查看更多(3)
  • null
    null
    08-26

    看来遇到这个BUG的同道不少。目前可以确定的是鸿蒙系统5.1.0+鸿蒙特供微信版本1.0.9必现这个BUG。当前我的解决方案是推翻原来的canvas组件以及绘制流程,重构成canvas2D方案和流程。好消息是这两种后者比前者api版本更新,可能在支持度上,比前者更好。同时,最重要的事,重构过程比较丝滑,主要是canvas对象实例的注册获取,以及ctx对象的操作语法有区别,相对应的改一下就可以了,整体业务流程大差不差,有特别需求差异的,建议问一下AI工具。祝大家开发顺利。

    ps:微信这帮人对自己的api都不测试的嘛,特别是在新的操作系统上的适配问题,简直无语

    08-26
    有用
    回复 1
    • null
      null
      08-26
      另外补充一点,为什么要用canvas2D方案来替代canvas方案?是因为canvas方案能直接调用wx.canvasToTempFilePath来将canvas对象转换成文件资源。而canvas2d方案则相当于替换掉了canvasToTempFilePath这一步,通过canvas.toDataURL生成base64文件,再通过base64ToTempPath转换成本地文件路径(注意,这里别忘了要wx.getFileSystemManager将转换成的文件写入到文件路径上,不然一个单独的路径拿去上传,会出问题的),然后就可以正常上传流程
      08-26
      回复
  • LLL
    LLL
    08-22

    什么时候修复这个bug

    08-22
    有用
    回复
登录 后发表内容