|
|
|
|
移动端

支付宝AR抢红包?前端轻松就破解

不过对于机智的前端童鞋来说,只需要简单的一段代码就能破解AR红包(当然成功率也不是100%)。我们要做的事情其实很简单 —— 把系统自带的小横条都去掉,去掉的部分取其附近的图片内容来填充。

作者:VaJoy Larn来源:VaJoy Larn|2016-12-27 09:49

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

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

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

破解原理见《上线仅一天:支付宝AR红包惨遭技术流破解》(https://news.cnblogs.com/n/559670/),感谢这位设计师童鞋。

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

支付宝AR抢红包?前端轻松就破解~

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

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

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

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

本文不再赘述该 CSS3 特性。

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

直接贴代码吧:

  1. <head> 
  2.  
  3.     <meta charset="UTF-8"
  4.  
  5.     <title>Title</title> 
  6.  
  7.     <style> 
  8.  
  9.         div { 
  10.  
  11.             margin-top: -1500px; 
  12.  
  13.             position: relative; 
  14.  
  15.             overflow: hidden; 
  16.  
  17.             background: #EEE; 
  18.  
  19.             width: 1440px; 
  20.  
  21.             height: 2110px; 
  22.  
  23.         } 
  24.  
  25.   
  26.  
  27.         #bg, #mask-bg { 
  28.  
  29.             position: absolute; 
  30.  
  31.             width: 1440px; 
  32.  
  33.             height: 2560px; 
  34.  
  35.             background-size: cover; 
  36.  
  37.         } 
  38.  
  39.         #mask-bg{ 
  40.  
  41.             top:9px; 
  42.  
  43.             mask-image: url(mask.png); 
  44.  
  45.             -webkit-mask-image: url(mask.png); 
  46.  
  47.         } 
  48.  
  49.         input { 
  50.  
  51.             height: 60px; 
  52.  
  53.             margin-top: 20px; 
  54.  
  55.         } 
  56.  
  57.     </style> 
  58.  
  59. </head> 
  60.  
  61. <body> 
  62.  
  63. <div> 
  64.  
  65.     <p id="bg"></p> 
  66.  
  67.     <p id="mask-bg"></p> 
  68.  
  69. </div> 
  70.  
  71. <input type="file"
  72.  
  73.   
  74.  
  75. <script> 
  76.  
  77.     var input = document.querySelector('input'), 
  78.  
  79.         bg = document.querySelector('#bg'), 
  80.  
  81.         maskBg = document.querySelector('#mask-bg'); 
  82.  
  83.   
  84.  
  85.     input.onchange = function () { 
  86.  
  87.         var src = getObjectURL(this.files[0]); 
  88.  
  89.         setBg(src); 
  90.  
  91.   
  92.  
  93.     }; 
  94.  
  95.   
  96.  
  97.     function setBg(src){ 
  98.  
  99.         bg.style.backgroundImage = 'url(' + src + ')'
  100.  
  101.         maskBg.style.backgroundImage = 'url(' + src + ')'
  102.  
  103.     } 
  104.  
  105.   
  106.  
  107.     /** 
  108.  
  109.      * 通过选择的文件获取其图片路径(blob) 
  110.  
  111.      * @param file 
  112.  
  113.      * @returns {*} 
  114.  
  115.      */ 
  116.  
  117.     function getObjectURL(file) { 
  118.  
  119.         var url = null
  120.  
  121.         if (window.createObjectURL != undefined) { 
  122.  
  123.             url = window.createObjectURL(file) 
  124.  
  125.         } else if (window.URL != undefined) { 
  126.  
  127.             url = window.URL.createObjectURL(file) 
  128.  
  129.         } else if (window.webkitURL != undefined) { 
  130.  
  131.             url = window.webkitURL.createObjectURL(file) 
  132.  
  133.         } 
  134.  
  135.         return url 
  136.  
  137.     } 
  138.  
  139.   
  140.  
  141. </script> 
  142.  
  143. </body> 

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

最终整体效果如下:

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

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

Tips:

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

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

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

【责任编辑:seeker TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

超级网管员——网络应用

本书全面、深入地介绍了网络应用技术,主要内容包括:RMS权限管理服务、Exchange邮件服务、LCS即时消息服务、WSUS系统更新服务、Symantec网...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊