近期阿里搞了各LBS+AR实景的红包玩法,小伙伴们在公司里都玩疯了~
有时候为了抢一个红包,会跑到另一个地方去拍照,虽然略麻烦,但整体的互动还是很有意思的。
不过对于机智的前端童鞋来说,只需要简单的一段代码就能破解AR红包(当然成功率也不是100%)。
破解原理见《上线仅一天:支付宝AR红包惨遭技术流破解》,感谢这位设计师童鞋。

我们要做的事情其实很简单 —— 把系统自带的小横条都去掉,去掉的部分取其附近的图片内容来填充,最终得到的效果图有不小的几率会被识别为匹配成功:

对于上图中间那块区域,我们可以通过固定的轮廓对底图进行遮罩得出。
所以对于前端而言,我们可以通过这样的 DOM 结构来实现如上需求:

