如何优雅的在家抢邻居的红包

文章目录

1. 1. AR红包？
2. 2. PS/AI
3. 3. 从计划到实现
   1. 3.1. 交互方式
   2. 3.2. 技术需求
   3. 3.3. 技术方案
   4. 3.4. 技术点细化
   5. 3.5. 技术点确认
4. 4. 实战测试
5. 5. 关于优化
6. 6. 写在最后

少抢怡情，多抢伤身，强抢灰飞烟灭，年轻人抢红包要节制😂

文末有该方案的github地址，心急的孩子们可以先去体验🔥

AR红包？

21号的晚些的时候，看到一大堆同事不好好干活，拿着手机满世界扫来扫去，才知道支付宝版本更新了AR抢红包功能。

由于小哥忙于业务不能自拔，再加上不就几块钱的红包嘛，就没再关注这事（平时也不爱抢红包，运气一直组里垫底，不热衷）。

直到周五看到朋友圈有人转发的一篇文章，有老哥花一小时写了个自动合成埋红包图片的服务，遂追到源码本着学习的精神拜读一下。咳咳好失望，这老哥的方法参数都是写死的，突然感觉人生的情怀就这么被点燃了 — 我大前端一个页面分分钟搞定。

PS/AI

如果一上来就吧唧吧唧敲代码，不管是业务还是技术方案，我都是拒绝的。因为我觉得这事不能按部就班来搞 — 看了网上很多破解的方案，普遍都是一套手动PS方案和一套完全听不懂的人工智能方案（深度卷积网络/Tensorflow/交叉熵，自行黑人问号？？？）

• 考虑了一下：
  • PS属于基础版方案（会使画图的人就会用那种，高手会录制动作 + 批量处理我会泄露天机？）；
  • AI属于高端技术方案（一般人都蒙圈那种，显然咱也是）。

那么问题来了，本着前端什么都能做的原则，那就得用前端的方法。况且上面这俩方案实操性确实不方便（一个软件级别：得装，一个服务级别：得搭）。那么有没有可能，只要打开一个网页点点点就可以完成的方式呢？

从计划到实现

交互方式

既然一下想不出来实现方案，但想要的页面交互总是可以先定下来：

• 0、把附近的红包线索提示截图
• 1、打开一个页面，选择想要处理的截图（批量选）
• 2、处理处理处理中…图片处理好了
• 3、拿起手机扫扫扫，打开红包，换一个回到3（批量图片用完了回到1）

总结一下要做的就是截图+点击选图+扫一扫，其他的都可以归结到技术方案里去实现。
那好，现在可以倒推技术需求了。

技术需求

• 0、批量获取选择的图片数据（本地读取/上传）
• 1、对每张图片进行图像处理（去掉一脸黑线什么的）
• 2、显示图片，且最好可以保存（发到其他屏幕上被扫）
• 3、可能需要微调的交互，需要预留微调参数

考虑到不想再搞一套服务做上传（而且我也没有空闲的机器来搞这个），那图片读取就本地化完成最好。
下面来制定技术方案。

技术方案

• 0、获取本地图片数据：通过H5的FileReader这个API可以获得FileList对象（F!!K,连API都能获取到对象了）
• 1、图像处理：canvas绘制（找开源的图像处理引擎方便），我用了AlloyImage-H5专业级图像处理开源引擎
• 2、保存：既然是canvas就可以输出成base64格式的图片，自然可以保存了
• 3、微调：尽可能简单，比如选个参数就可以

到此除了图像处理的细节，基本都已经靠谱了。那么来想想如何把一张栅格化的图片，变成我们想要的近似图片吧。
介于本人自认PS玩的还算顺溜，且对AI一脸懵逼的状态，最后选择了借鉴PS大法的思路。

技术点细化

• Version1
  • 0、通过神秘算法得到黑线区域，通过[选区/叠加/裁剪/其他未知方式]把原图的黑线（就是一脸黑线的黑线）干掉；
  • 1、复制图层，在干掉的区域，使用邻近的部分填充，done。
  • 不确定因素：算法实现及复杂度、性能问题
• Version2
  • 造一个纯栅格的png图片来代替V1中的神秘算法，其他相同
  • 不确定因素：定位到黑线、获得黑线的宽度
• Version3
  • 使用图层混合模式来替代上述需要挖坑的方案（从 挖坑-填坑模式 转换为 设置混合模式+图层覆盖 模式，此方案一步可替代上述2步）
  • 不确定因素：获得黑线的宽度

通过比对（怎么想都是V3最好用），还是选择了V3（不确定因素最少，可行性最高，且不确定因素可抽出作为微调参数）
那么现在最后的问题来了：

• 1、选择混合模式
• 2、获得黑线的宽度

技术点确认

终于到了查阅资料的时候，不过现成了解每种混合模式都没有实际拿一张图扔到PS里看一下效果来的快。
于是在惨无人道的模式组合之后（旁白：/[沃特法克]+[什么鬼]+[哎呦不错哦]{1}$/），我发现变亮和浅色两个混合模式符合我的期望。

后续通过查询了解（其他模式也很容易搜到说明）：

• 变亮：对混合的两个图层相对应区域RGB通道中的颜色亮度值进行比较，取较高的的像素点为混合之后的颜色，使得总的颜色灰度的亮度升高，造成变亮的效果
• 浅色：通过计算混合色与基色所有通道的数值总和，哪个数值大就选为结果色。因此结果色只能在混合色与基色中选择，不会产生第三种颜色

实际使用AlloyImage做图像处理时，发现只能使用仅有的变亮模式，那么混合色的灰度亮度就会因“黑线”降低。
这一步很好办，使用亮度调节参数，调整图片的亮度和对比对即可。

到此为止，就只剩“黑线的宽度”技术点无法确认了，经过3秒钟思考，决定做成一个可变参数，可以让用户更改选择，思考如下：

• 1、按像素点计算的算法成本 >> 预定义+自定义参数成本
• 2、经测试机实践，该参数比较稳定，可以直接使用预定义参数
• 3、即使遇到了诡异的截图尺寸，自行更改尝试几次就可以得出该参数，之后一直使用即可
• 4、该宽度不会具有大范围的波动值（毕竟每行在原图中占比都很小）
• 5、可以根据后续反馈进行再优化（说不准明天线索图变策略就不用想这个了）

此时，已经完成整体明确的技术方案（技术细节的规划调整是一直进行的），剩下的就是just coding。

实战测试

随机在AR红包中选择了29个，并进行了扫描，结果如下图（绿色对勾表示可扫出红包来），本次测试成功率约37%。

各类型图片总结如下：

• 秒开：人脸、物件较多/视野开阔场景
• 换姿势/角度：近距离物品，不规则且画面无明显规律（长直线边缘较少）
• 死活扫不开：颜色单调（仅黑白或色调相近）、近照带清晰文字、形状极其规则（长直线边缘明显）

测试时间（约30min）组成：

• 截图：约5min
• 图片处理等待：约1min
• 换屏显示：约3min
• 找对应红包：约3min
• 扫码：约5min
• 扫不成等待：约10min（主要是一开始调试不甘心，后来绕一圈不中就下一张）
• 其他：约5min（发呆+懵逼+纳闷）

抢红包总结（最关心这个对不对）

• 勉强可以吃个早餐(运气不佳，大多几毛几分的)
  • 这个嘛，不要太认真，本着开心的态度就好
• 为毛就只有10个成功的？
  • 因为第11个时候显示“今天领取次数太多，明天再来”（什么时候改的，昨天还看到有人领了10+个，难道咱进黑名单了？）

关于优化

• 本着娱乐精神，暂时就不再花时间优化了，反正限制了10个，多扫几个就是了嘛
• 再说也没想好怎么优化，若是有建议尽管提issue，若是有建议尽管提issue，若是有建议尽管提issue

写在最后

操作页面：aliAR demo page
源码github：aliAR - 支付宝AR红包助手
源码环境：koa-grace - 基于koa的标准前后端分离框架

• 巨大的疑问：本着交流学习的态度，应该不会被某宝关小黑屋吧，不然过年抢不到红包怎么办？😂
• 单身狗圣诞节连一颗苹果都没有收到，唉
• 联系方式 or 分享红包 请点这😂