- 当前 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 里面加入延时 大概率解决 但是不是覆盖所有机型 部分三星还是有问题 求官方尽快解答
复现机型:
你好，这边测试华为和iPhonexr，微信版本都是7.0.4，未发现问题，这边对于两端的表现提供的截图能否更加完整些？
##
iphone 均未出现过问题
android 大部分都有此问题
不知道您这边真机调试的时候设置的len值是多少
const len = 200;// 可改变这个len的值 越大越容易复现你可以等canvas一绘制好图片就立即store
##
测试的华为机型合成之后 文字没有出现重叠吗?
是否可以用我提供的机型做一下测试 多试一下吧 我们好多机子出现问题
##
谢谢
拿6.7.3的小米或者别的安卓机试试 最新的7.0.4好像不好复现
Android合成的图相较于iOs合成的图 你仔细看
* 纹理有差异 Android的较为粗糙 多张图之间的间隙较大
* 文字有重叠 Android的文字有重叠 iOs没有
这个例子只是为了复现bug 进行了简单的多次绘制
事实上我们在做canvas绘制生成二维码过程中深受其害 (iOs生成的二维码可识别, Android的确有问题)
还请官方多试试别的机型
测试的华为机型，文字没有出现重叠