近期阿里搞了各LBS+AR实景的红包玩法，小伙伴们在公司里都玩疯了~

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

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

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

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

对于上图中间那块区域，我们可以通过固定的轮廓对底图进行遮罩得出。

所以对于前端而言，我们可以通过这样的 DOM 结构来实现如上需求：

其中 C 和 B 其实是同一个背景（即抢红包页面的手机截图），A 是一个遮罩轮廓，会对 B 进行剪辑获得非条纹部分的图片内容。同时 B 再相对 C 进行垂直偏移，用自身被剪辑后的内容挡住 C 的条纹。

根据图片alpha通道来做遮罩的能力，我们可以使用 CSS3 的 mask-image 特性来实现，其具体应用在我之前《巧用 mask-image 实现简单进度加载界面》一文中已做了详细介绍：

本文不再赘述该 CSS3 特性。

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

直接贴代码吧：

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            margin-top: -1500px;

            position: relative;

            overflow: hidden;

            background: #EEE;

            width: 1440px;

            height: 2110px;

        }

        #bg, #mask-bg {

            position: absolute;

            width: 1440px;

            height: 2560px;

            background-size: cover;

        }

        #mask-bg{

            top:9px;

            mask-image: url(mask.png);

            -webkit-mask-image: url(mask.png);

        }

        input {

            height: 60px;

            margin-top: 20px;

        }

    </style>

</head>

<body>

<div>

    <p id="bg"></p>

    <p id="mask-bg"></p>

</div>

<input type="file">

<script>

    var input = document.querySelector('input'),

        bg = document.querySelector('#bg'),

        maskBg = document.querySelector('#mask-bg');

    input.onchange = function () {

        var src = getObjectURL(this.files[0]);

        setBg(src);

    };

    function setBg(src){

        bg.style.backgroundImage = 'url(' + src + ')';

        maskBg.style.backgroundImage = 'url(' + src + ')';

    }

    /**

     * 通过选择的文件获取其图片路径（blob）

     * @param file

     * @returns {*}

     */

    function getObjectURL(file) {

        var url = null;

        if (window.createObjectURL != undefined) {

            url = window.createObjectURL(file)

        } else if (window.URL != undefined) {

            url = window.URL.createObjectURL(file)

        } else if (window.webkitURL != undefined) {

            url = window.webkitURL.createObjectURL(file)

        }

        return url

    }

</script>

</body>

需要了解的是，我们在 getObjectURL 方法中使用了 URL.createObjectURL 接口来为所选文件生成对应的 blob 内容的URL，再将其赋给底图的 background-image。其格式是这样的：

最终整体效果如下：

需要注意的是，这里的图片宽高值，以及遮罩图 mask.png，都是根据我的手机分辨率来定制的，所以要使用该工具的话请自行修改样式和遮罩图片。

该小工具挂在我的 github 仓库上，有需求的可以自助下载修改。

Tips：

1. 这里无法保证成功率100%，尽量选择颜色较深、没有文字出现的照片，成功率会大一点；

2. 支付宝是有防刷措施的，每天都有领取红包的数量上限，所以要通过AR红包来发家致富是走不通了（手动滑稽）；

3. 现在破解起来很轻松的一个地方是，支付宝每次生成的条纹都是固定的（条数、位置、粗度），说不好以后会对这块进行优化，进而动态生成条纹，那本文的办法就不适用了（mask.png无法适应）。不过即使那样也可以走canvas来hack。

其实阿里蛮多福利都能通过前端来hack，例如之前的《天猫双十一狂抢优惠券？机智的程序猿这么玩》，开动脑筋想一想办法经常会出来（这也是为何大公司做活动，都会谨慎地加上防刷措施的原因）。共勉~

支付宝AR抢红包？前端轻松就破解~的更多相关文章

  1. 支付宝AR实景红包上线不久即遭破解，官方已提高技术门槛

    临近春节,阿里巴巴和腾讯的红包大战可谓下足功夫,上周支付宝推出了AR实景红包,该玩法基于"LBS+AR+红包"的方式,类似与今年火爆全球的AR手游Pekomon Go ,只不过这次 ...

  2. 说一说关于破解支付宝AR红包的事

    当朋友圈的你们才开始分享支付宝AR红包的消息的时候,我已经对它动了一二三四次歪脑筋了,虽然事实证明并不是那么顺利,至今我也只在电脑前识别出5个不知道在哪里的红包,其中一个还因为定位信息不符开不了. 昨 ...

  3. 支付宝AR红包引出Python中的PIL小试

    这两天支付宝AR红包火了,周围的同学全在玩.可是我一直在想这个原理是什么?通过请教大神和思考,知道了它有两个限定条件:GPS地理位置和图片的识别.所以,只要我们有了这两个限定条件,就不难进行该红包的破 ...

  4. android蜂巢效果、环形菜单、Kotlin影视应用、简约时钟、查看导出App、支付宝AR扫码效果等源码

    Android精选源码 一个蜂巢布局管理器,外观帅气外,动画效果也是很赞 一个基础 UI 框架项目,实现不同布局格式的混排 仿建行app效果,一个环形菜单的布局管理器源码 基于组件化实现的一款用Kot ...

  5. Python + PIL 处理支付宝AR红包

    思路比较简单:1.对图片进行锐化处理:2.设(r_h, g_h, b_h)为支付宝遮罩黑条的RGB值,以此为中心,查找半径为Diff_radius的范围内所有的色值: 3.对每一行符合步骤2的像素点个 ...

  6. 2017上半年技术文章集合【Android】—184篇文章分类汇总

    地址: http://blog.csdn.net/androidstarjack/article/details/77923753 声明 | 本文是于亚豪 原创 终端研发部 前言: 2017年已经过大 ...

  7. 前端：微信支付和支付宝支付在pc端和h5页面中的应用

    1:h5微信支付 使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html  中的 (1):公司需要首先要配置公众号微信支付地址和测试白名单(支付的时 ...

  8. [转帖]教你如何破解IC卡的校验值

    教你如何破解IC卡的校验值   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin ...

  9. 前端js文件合并三种方式

    最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...

随机推荐

  1. 关于解决python线上问题的几种有效技术

    工作后好久没上博客园了,虽然不是很忙,但也没学生时代闲了.今天上博客园,发现好多的文章都是年终总结,想想是不是自己也应该总结下,不过现在还没想好,等想好了再写吧.今天写写自己在工作后用到的技术干货,争 ...

  2. 我是如何在SQLServer中处理每天四亿三千万记录的

    首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...

  3. TODO：搭建Laravel VueJS SemanticUI

    TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...

  4. Atitit 项目语言的选择 java c#.net  php??

    Atitit 项目语言的选择 java c#.net  php?? 1.1. 编程语言与技术,应该使用开放式的目前流行的语言趋势1 1.2. 从个人职业生涯考虑,java优先1 1.3. 从项目实际来 ...

  5. 探索ASP.NET MVC5系列之~~~5.缓存篇（页面缓存+二级缓存）

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  6. ifconfig: command not found（CentOS专版，其他的可以参考）

    ifconfig: command not found 查看path配置(echo相当于c中的printf,C#中的Console.WriteLine) echo $PATH 解决方案1:先看看是不是 ...

  7. 微软新神器-Power BI横空出世，一个简单易用，还用得起的BI产品，你还在等什么？？？

    在当前互联网,由于大数据研究热潮,以及数据挖掘,机器学习等技术的改进,各种数据可视化图表层出不穷,如何让大数据生动呈现,也成了一个具有挑战性的可能,随之也出现了大量的商业化软件.今天就给大家介绍一款逆 ...

  8. SELECT INTO 和 INSERT INTO SELECT 两种表复制语句

    Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) values(value1,value2,...)这种形式的在应用程序开发中必不可少.但我 ...

  9. 从netty-example分析Netty组件续

    上文我们从netty-example的Discard服务器端示例分析了netty的组件,今天我们从另一个简单的示例Echo客户端分析一下上个示例中没有出现的netty组件. 1. 服务端的连接处理,读 ...

  10. android 事件分发机制详解（OnTouchListener,OnClick）

    昨天做东西做到触摸事件冲突,以前也经常碰到事件冲突,想到要研究一下Android的事件冲突机制,于是从昨天开始到今天整整一天时间都要了解这方面的知识,这才懂了安卓的触摸和点击事件的机制.探究如下: 首 ...