近期阿里搞了各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. nodejs进阶(4)—读取图片到页面

    我们先实现从指定路径读取图片然后输出到页面的功能. 先准备一张图片imgs/dog.jpg. file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'.(file. ...

  2. shell变量

    定义变量 定义变量时,变量名不加美元符号($),如: variableName="value" 注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编程语言都不一样.同时,变量名 ...

  3. 构建通用的 React 和 Node 应用

    这是一篇非常优秀的 React 教程,这篇文章对 React 组件.React Router 以及 Node 做了很好的梳理.我是 9 月份读的该文章,当时跟着教程做了一遍,收获很大.但是由于时间原因 ...

  4. C++随笔：.NET CoreCLR之GC探索（1）

    一直是.NET程序员,但是.NET的核心其实还是C++,所以我准备花 一点时间来研究CoreCLR和CoreFX.希望这个系列的文章能给大家带来 帮助. GC的代码有很多很多,而且结构层次对于一个初学 ...

  5. ADO.NET一小记-select top 参数问题

    异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 最近使用ADO.NET的时候,发现select top @count xxxx 不 ...

  6. 高性能 TCP/UDP/HTTP 通信框架 HP-Socket v4.1.1

    HP-Socket 是一套通用的高性能 TCP/UDP/HTTP 通信框架,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP/HTTP 通信系统,提供 C/ ...

  7. BPM嵌入式流程解决方案分享

    一.需求分析由于企业业务的独特性或者企业高层独特的管理思想,很多客户选择了自行开发业务系统的方式来实现独有的竞争力. 这类信息系统通常经过了多年的开发,伴随着企业的发展一直在不断优化,与企业的业务非常 ...

  8. AFN解析器里的坑

    AFN框架是用来用来发送网络请求的,它的好处是可以自动给你解析JSON数据,还可以发送带参数的请求AFN框架还可以监测当前的网络状态,还支持HTTPS请求,分别对用的类为AFNetworkReacha ...

  9. Running Dubbo On Spring Boot

    Dubbo(http://dubbo.io/) 是阿里的开源的一款分布式服务框架.而Spring Boot则是Spring社区这两年致力于打造的简化Java配置的微服务框架. 利用他们各自优势,配置到 ...

  10. git 使用

    三个状态 文件由 git 维护三中状态 modified:文件被改动,但还没有被提交 staged:标记被改动的文件到下次需要提交的文件快照 committed:文件已经被安全保存到本地 可以使用命令 ...