收藏
回答

Android canvas 绘制图片失败

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug CanvasContext.draw(boolean reserve, function callback) 客户端 6.7.3 2.4.4

- 当前 Bug 的表现(可附上截图)

Android canvas 可以绘制图片和文字 但是视图层看到的图片和文字绘制与ios不同 且保存到本地的图片和文字部分错落 与ios或者开发工具差别很大

以下图片依次是

1. iOS 真机调试

2. iOS 真机 canvas导出图片 保存到本地相册

3. Android 真机调试

4. Android 真机 canvas导出图片 保存到本地相册





- 预期表现

Android canvas 可以成功绘制图片和文字 且导出的图片正常 与iOS/开发者工具导出一致

- 复现路径

可以打开代码片段 在安卓机上预览调试

Notice: 在绘制大量图片的时候会大概率复现问题 所以再调试的时候请耐心等待一下 可以控制下面代码里面的len变量来改变绘制的图片数量

- 提供一个最简复现 Demo

// 核心代码

async onReady() {
  await wapi.showLoadingAsync({
    title: '生成图片...'
  });
  const len = 200; // 可改变这个len的值 越大越容易复现
  for (let index = 0; index < len; index++) {
    this.customData.options.push({
      type: UTYPE['IMG'],
      x: 0 + index,
      y: 0,
      width: 100,
      height: 80,
      path: 'http://i.s.babyfs.cn/cb92c6f026d047078f5e16ba23692db8.jpg'
    });
  }
  for (let index = 0; index < len; index++) {
    this.customData.options.push({
      type: UTYPE['IMG'],
      x: 0 + index,
      y: 80,
      width: 100,
      height: 80,
      path: 'http://i.s.babyfs.cn/cb92c6f026d047078f5e16ba23692db8.jpg'
    });
  }
  for (let index = 0; index < len; index++) {
    this.customData.options.push({
      type: UTYPE['IMG'],
      x: 0 + index,
      y: 160,
      width: 100,
      height: 80,
      path: 'http://i.s.babyfs.cn/cb92c6f026d047078f5e16ba23692db8.jpg'
    });
  }
  for (let index = 0; index < len; index++) {
    this.customData.options.push({
      type: UTYPE['TEXT'],
      x: 0,
      y: 300,
      text: `TEST ${index === len - 1 ? index : ''}`,
      color: '#098fe1',
      textAlign: 'left',
      fontSize: 20,
      font: 'italic normal 700 24px/3 courier'
    });
  }
  this.customData.config = {
    reserve: true,
    // x: 0,
    // y: 0,
    destWidth: 750,
    destHeight: 1334,
    fileType: 'jpg',
    quality: 1
  };
  await this.draw();
  wapi.hideLoading();
}


- 补充

这个问题 可以在 CanvasContext.draw(boolean reserve, function callback) callback 里面加入延时 大概率解决 但是不是覆盖所有机型 部分三星还是有问题 求官方尽快解答


最后一次编辑于  05-07  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 娇华
    娇华
    05-06

    你好,这边测试华为和iPhonexr,微信版本都是7.0.4,未发现问题,这边对于两端的表现提供的截图能否更加完整些?

    05-06
    赞同
    回复 5
    • 程晋瑞
      程晋瑞
      05-06

      ##


      iphone 均未出现过问题

      android 大部分都有此问题

      不知道您这边真机调试的时候设置的len值是多少

      const len = 200; // 可改变这个len的值 越大越容易复现

      你可以等canvas一绘制好图片就立即store


      ##


      测试的华为机型合成之后 文字没有出现重叠吗?

      是否可以用我提供的机型做一下测试 多试一下吧 我们好多机子出现问题


      ##


      谢谢



      05-06
      1
      回复
    • 程晋瑞
      程晋瑞
      05-06回复程晋瑞



      拿6.7.3的小米或者别的安卓机试试 最新的7.0.4好像不好复现

      05-06
      1
      回复
    • 程晋瑞
      程晋瑞
      05-06

      Android合成的图相较于iOs合成的图 你仔细看

      * 纹理有差异 Android的较为粗糙 多张图之间的间隙较大

      * 文字有重叠 Android的文字有重叠 iOs没有

      05-06
      1
      回复
    • 程晋瑞
      程晋瑞
      05-06

      这个例子只是为了复现bug 进行了简单的多次绘制

      事实上我们在做canvas绘制生成二维码过程中深受其害 (iOs生成的二维码可识别, Android的确有问题)

      还请官方多试试别的机型

      05-06
      1
      回复
    • 娇华
      娇华
      05-07回复程晋瑞

      测试的华为机型,文字没有出现重叠

      05-07
      回复
  • 程晋瑞
    程晋瑞
    05-06

    复现机型:



    05-06
    赞同 1
    回复