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

摘要: 最近阿里巴巴搞了各LBS+AR实景拍摄的大红包游戏玩法,小伙子伴们在企业里都玩疯掉~有时候候以便抢一个大红包,会跑到另外一个地区去照相,尽管略不便,但总体的互动交流還是很有...

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



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:模板小程序