付款宝AR领红包？前端开发轻轻松松就破译~

2021-01-29 18:29

最近阿里巴巴搞了各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，比如以前的《天猫商城双十一狂抢特惠券？机灵的程序员那么玩》，开动脑筋筋想想方法常常会出去（这也是为什么大企业做主题活动，都是慎重地再加防刷对策的缘故）。共勉~