AR红包？

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

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

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

PS/AI

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

各类型图片总结如下：

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

实测29张

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

次数太多

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