腾讯团队分享：一次手Q聊天界面中图片显示bug的追踪过程分享

原作者：陈舜尧，腾讯手Q团队Andriod工程师。

1、前言

“这张图片在快捷发图栏背景是黑色的，为啥发到AIO（会话窗口）里背景就变成白的了？” 通过一个bug单，对黑白背景问题跟进的过程中发现了手q中很多奇怪的表现。

本次通过一层层分析代码，整理总结并记录了本次追踪bug的过程，也理清了手q中图片的显示和发送逻辑，以及对透明通道图片的特殊处理。不知您的Andriod是否也有过类似遭遇，或许能带给你此许启发。

2、黑背景？白背景？

这张图片在快捷发图栏背景是黑色的，发到AIO里背景就变成白的了。

拿到问题，分析有两种可能原因：

• 1）展示view的背景色不一致；
• 2）选中的png图片的透明通道在AIO和快捷发图栏两个不同的场景下过滤规则不一致。
  

很容易就能发现两个场景处理图片的不同：

• 快捷发图栏将png图片获取为bitmap，再压缩成jpeg，这个过程直接忽略了透明通道，android默认处理的结果就是一张黑色背景的jpeg；
• 快捷发图栏所有图片的字节流持久化到同一个文件里，这样做的目的是下次从本地加载多张图片时，会共用同一个文件IO，提高加载效率。
  

AIO中的缩略图也是由原图压缩成jpeg，在处理的代码中，我发现了人为加白色背景的逻辑，原来这都是产品的策略，可能考虑到AIO中png图片黑色背景视觉上不太美观，所以进行了特殊处理。然而快捷发图栏和AIO中视觉上没做到统一，有道是 产品拍头一时爽，开发解bug火葬场。

3、都是png，怎么有黑又有白！

既然问题找到了，美滋滋的准备加个鸡腿，然而事情并没有那么简单！回归问题的时候我用了另外一张png图片测试，咦，怎么这张图片在AIO中背景是黑色的？

有两个怀疑方向：

• 1）png压缩成jpeg的过程，丢失透明通道导致AIO中这张图片为黑色背景；
• 2）有没有可能是在canvas上绘制白色背景失败导致的该问题？
  

先从第一个方向分析：通过BitmapFactory.decode把png输出为bitmap，再把白底、bitmap依次绘到canvas上，期间旋转信息的处理、对长图的特殊处理、subSample这里就不展开了。这里怀疑png输出为bitmap时，透明通道丢失。

我们知道ARGB指的是一种色彩模式，里面A代表Alpha，R表示red，G表示green，B表示blue，其实所有的可见色都是右红绿蓝组成的，所以红绿蓝又称为三原色，每个原色都存储着所表示颜色的信息值，Bitmap.Option中config的值有下面几种，ALPHA_8 代表8位Alpha位图 ，ARGB_4444 代表16位ARGB位图 ，ARGB_8888 代表32位ARGB位图 ，RGB_565 代表16位RGB位图。有没有可能是png输出为bitmap的过程中，有奇葩的策略调整config的值导致ALPHA通道遗失？于是一步步断点跟踪这块的代码，很遗憾没发现异常。

再看看第二个方向：我们review下加白色背景的代码（见上图），Paint设置了Xfermode。PorterDuff.Mode能设置canvas绘图时不同图层的混合方式，下图展示了不同的混合方式。我们处理是将图片bitmap叠加到白色背景上，这里SRC_OVER看上去也没问题。。。



啪啪啪打脸，看来不是怀疑的两个方向出了问题。于是病急乱投医把锅甩给了图片：
“会不会是png格式的问题，png某个参数导致转化过程中bitmap背景不同？”

在查阅资料、用工具分析对比了两张png图片的结构，欣喜得发现问题跟png格式并没有半毛钱关系。冷静下来，还是用老办法，一步一步跟代码！



游戏图压缩后P2大于P1（是的你没看错，压缩后图片反而大，压缩步骤取bitmap，再绘制，最后质量压缩成jpeg），所以是拿原始图片当作大图P3去生成缩略图P4，原始图片有透明通道，所以对应的缩略图能加上白色背景；骰子图片压缩后发现比原图小，所以用压缩图P2当作大图P3去生成缩略图P4。P2是质量压缩png生成的jpeg，已经丢失透明通道，是一张黑色背景的图。即使在P4加上白色背景也被上层图层覆盖，我们看到的就是黑色骰子缩略图。

我之前分析的过程中忽略了压缩原始图片生成P2这一步。一叶障目，理清了思路，问题就显而易见了！

4、黑白分明，搞清楚所有情况下的表现

既然理清了流程，那就把所有情况下的表现分析下吧。我们看看勾选原图下的表现。



这里很好理解，骰子图勾选原图后，是把原始图片生成缩略图P4，原始图有透明通道，所以生成的缩略图也有白色背景。



如果是PC发送PNG图片，客户端去接收消息下载图片呢？PC端发送图片不存在是否勾选原图的概念，也不存在压缩的概念（耿直boy）。客户端接收方会去下载PC端发送的图片P5和架平生成的缩略图P7。

5、黑白闪变是什么鬼！

这时我在回归过程中又发现了一起不寻常的现象。客户端发送游戏图后，接收端收到图片，在AIO中的缩略图会有一个由黑变白的过程。呵呵，兵来将挡，bug来我解。又滚去熟悉了下接收端的逻辑。



发送的这张游戏图是由透明通道的，架平并没有为有透明通道的图片添加白色背景的策略，所以接收端下载的是一张黑色背景的架平缩略图。

这里要提到手q的预下载策略。用户可能会去点开大图，如果点击时再去下载，转菊花的过程体验很差，所以手q会综合网络情况、当前已用流量等维度去判断是否需要提前帮用户下载大图。图中图片消息命中了预下载策略，手q帮用户提前下载好了大图。

这时候问了，大图明明是黑色背景，为什么AIO中会闪变成白色？哈哈哈，这里又是手q人性化的一点，由于下载好了大图，为了让用户在AIO中可以直接可以看到比较清晰的缩略图，手q不信任架平生成的缩略图，用已经下载的大图在本地生成了相对高清的缩略图。

而下载的大图是有透明通道的png，根据前面已经提到的产品策略，我们会给本地生成的缩略图加上白色背景，所以出现了闪变~

6、本文小结

全文告一段落，在跟进问题的过程中，又完整的走了一遍手Q的图片发送流程。

除了提高对业务的熟悉程度之外，不禁感慨，前辈们为图片发送展示流程做了数不清的优化项，前人栽树后人乘凉，由衷的钦佩！

（原文链接：https://www.qcloud.com/community/article/602504，有修证）

附录：有关微信、QQ的文章汇总

[1] 有关QQ、微信的技术文章：
《微信团队分享：微信Android版小视频编码填过的那些坑》
《微信手机端的本地数据全文检索优化之路》
《企业微信客户端中组织架构数据的同步更新方案优化实战》
《微信团队披露：微信界面卡死超级bug“15。。。。”的来龙去脉》
《QQ 18年：解密8亿月活的QQ后台服务接口隔离技术》
《月活8.89亿的超级IM微信是如何进行Android端兼容测试的》
《以手机QQ为例探讨移动端IM中的“轻应用”》
《一篇文章get微信开源移动端数据库组件WCDB的一切！》
《微信客户端团队负责人技术访谈：如何着手客户端性能监控和优化》
《微信后台基于时间序的海量数据冷热分级架构设计实践》
《微信团队原创分享：Android版微信的臃肿之困与模块化实践之路》
《微信后台团队：微信后台异步消息队列的优化升级实践分享》
《微信团队原创分享：微信客户端SQLite数据库损坏修复实践》
《腾讯原创分享(一)：如何大幅提升移动网络下手机QQ的图片传输速度和成功率》
《腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（下篇）》
《腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（上篇）》
《微信Mars：微信内部正在使用的网络层封装库，即将开源》
《如约而至：微信自用的移动端IM网络层跨平台组件库Mars已正式开源》
《开源libco库：单机千万连接、支撑微信8亿用户的后台框架基石 [源码下载]》
《微信新一代通信安全解决方案：基于TLS1.3的MMTLS详解》
《微信团队原创分享：Android版微信后台保活实战分享(进程保活篇)》
《微信团队原创分享：Android版微信后台保活实战分享(网络保活篇)》
《Android版微信从300KB到30MB的技术演进(PPT讲稿) [附件下载]》
《微信团队原创分享：Android版微信从300KB到30MB的技术演进》
《微信技术总监谈架构：微信之道——大道至简(演讲全文)》
《微信技术总监谈架构：微信之道——大道至简(PPT讲稿) [附件下载]》
《如何解读《微信技术总监谈架构：微信之道——大道至简》》
《微信海量用户背后的后台系统存储架构(视频+PPT) [附件下载]》
《微信异步化改造实践：8亿月活、单机千万连接背后的后台解决方案》
《微信朋友圈海量技术之道PPT [附件下载]》
《微信对网络影响的技术试验及分析（论文全文）》
《一份微信后台技术架构的总结性笔记》
《架构之道：3个程序员成就微信朋友圈日均10亿发布量[有视频]》
《快速裂变：见证微信强大后台架构从0到1的演进历程（一）》
《快速裂变：见证微信强大后台架构从0到1的演进历程（二）》
《微信团队原创分享：Android内存泄漏监控和优化技巧总结》
《全面总结iOS版微信升级iOS9遇到的各种“坑”》
《微信团队原创资源混淆工具：让你的APK立减1M》
《微信团队原创Android资源混淆工具：AndResGuard [有源码]》
《Android版微信安装包“减肥”实战记录》
《iOS版微信安装包“减肥”实战记录》
《移动端IM实践：iOS版微信界面卡顿监测方案》
《微信“红包照片”背后的技术难题》
《移动端IM实践：iOS版微信小视频功能技术方案实录》
《移动端IM实践：Android版微信如何大幅提升交互性能（一）》
《移动端IM实践：Android版微信如何大幅提升交互性能（二）》
《移动端IM实践：实现Android版微信的智能心跳机制》
《移动端IM实践：WhatsApp、Line、微信的心跳策略分析》
《移动端IM实践：谷歌消息推送服务(GCM)研究（来自微信）》
《移动端IM实践：iOS版微信的多设备字体适配方案探讨》
《信鸽团队原创：一起走过 iOS10 上消息推送(APNS)的坑》
《腾讯信鸽技术分享：百亿级实时消息推送的实战经验》
>> 更多同类文章 ……

[2] 有关QQ、微信的技术故事：
《腾讯开发微信花了多少钱？技术难度真这么大？难在哪？》
《技术往事：创业初期的腾讯——16年前的冬天，谁动了马化腾的代码》
《技术往事：史上最全QQ图标变迁过程，追寻IM巨人的演进历史》
《技术往事：“QQ群”和“微信红包”是怎么来的？》
《开发往事：深度讲述2010到2015，微信一路风雨的背后》
《开发往事：微信千年不变的那张闪屏图片的由来》
《开发往事：记录微信3.0版背后的故事（距微信1.0发布9个月时）》
《一个微信实习生自述：我眼中的微信开发团队》
《首次揭秘：QQ实时视频聊天背后的神秘组织》
>> 更多同类文章 ……

厉害，总结的很到位