最近，阿里巴巴推出了各种LBS+AR实景红包玩法，公司里的小伙伴们都疯了~

有时为了抢红包，我会跑到另一个地方去拍照。虽然有点麻烦，但是整体的互动还是很有趣的。

不过，对于智能前端童鞋来说，只需要一段简单的代码就可以破解AR红包（当然成功率不是100%）。

破解原理参见《上线仅一日：支付宝AR红包被技术流破解》()，感谢这位童鞋设计师。

我们要做的其实很简单——去掉系统自带的所有小横条，并用附近的图像内容填充去掉的部分。最终渲染图有很大几率会被识别为匹配成功：

对于上图中间的区域，我们可以用固定的轮廓遮盖基础图像。

那么对于前端来说，我们可以通过这样的DOM结构来实现上述需求：

其中，C和B实际上是相同的背景（即抢红包页面的手机截图），A是蒙版轮廓，B将被编辑以获得图像内容的非条纹部分。同时，B相对于C垂直偏移，利用自身剪切的内容遮挡C的条纹。

我们可以利用CSS3的mask-特性来实现基于图像通道进行遮罩的能力。它的具体应用在我之前的文章《使用Mask-实现一个简单的进度加载接口》中已经详细介绍过：

本文不会详细介绍这个 CSS3 功能。

还有一个小需求——希望B、C的底图可以动态替换。我们可以使用 [type=file] 组件来实现这一点。

只需发布代码：

id="bg">

id="掩码-bg">

类型=“文件”>

需要理解的是我们使用的是URL。方法中的接口为所选文件生成相应blob内容的URL，然后将其分配给底图的-。它的格式是这样的：

最终整体效果如下：

需要注意的是，这里的图片宽高值，以及遮罩图片mask.png，都是根据我手机的分辨率定制的，所以如果要使用这个工具，请修改样式并自己屏蔽图像。

这个小工具挂在我的仓库里，有需要的可以自行下载修改。

尖端：

1.这里不保证100%的成功率。尽量选择颜色较深、没有文字的照片，成功率会更高；

2、支付宝有反刷单措施，每天领取红包数量有限制，所以不可能通过AR红包发财（手动滑稽）；

3、现在非常容易破解的一点是支付宝每次生成的条纹都是固定的（数量、位置、粗细）。未知未来是否会对该区域进行优化，动态生成条纹。那么这篇文章的方法就不适用了（mask.png无法适配）。但即便如此，也可能会出现黑客攻击。