《支付宝AR抢红包？前端轻松就破解~ - Android-.docx》由会员分享，可在线阅读，更多相关《支付宝AR抢红包？前端轻松就破解~ - Android-.docx（11页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、支付宝AR抢红包？前端轻松就破解-Android-最新IT资讯_电脑知识大全_网络安全教程-次元立方网最近阿里搞了各LBS+AR实景的红包玩法，小伙伴们在公司里都玩疯了有时候为了抢一个红包，会跑到另一个地方去拍照，固然略费事，但整体的互动还是很有意思的。不过对于机智的前端童鞋来讲，只需要简单的一段代码就能破解AR红包当然成功率也不是100%。破解原理见（上线仅一天：支付宝AR红包惨遭技术流破解），感谢这位设计师童鞋。我们要做的事情其实很简单把系统自带的小横条都去掉，去掉的部分取其附近的图片内容来填充，最终得到的效果图有不小的几率会被识别为匹配成功：对于上图中间那块区域，我们能够通过固定的轮廓对
2、底图进行遮罩得出。所以对于前端而言，我们能够通过这样的DOM构造来实现如上需求：其中C和B其实是同一个背景即抢红包页面的手机截图，A是一个遮罩轮廓，会对B进行剪辑获得非条纹部分的图片内容。同时B再相对C进行垂直偏移，用本身被剪辑后的内容挡住C的条纹。根据图片alpha通道来做遮罩的能力，我们能够使用CSS3的mask-image特性来实现，其详细应用在我之前（巧用mask-image实现简单进度加载界面）一文中已做了具体介绍：本文不再赘述该CSS3特性。另外还有一点小需求希望B和C的底图能够动态更换。这个我们使用inputtype=file组件来实现即可。直接贴代码吧：headmetachar
3、set=UTF-8titleTitle/titlestyledivmargin-top:-1500px;position:relative;overflow:hidden;background:#EEE;width:1440px;height:2110px;#bg,#mask-bgposition:absolute;width:1440px;height:2560px;background-size:cover;#mask-bgtop:9px;mask-image:url(mask.png);-webkit-mask-image:url(mask.png);inputheight:60px;m
4、argin-top:20px;/style/headbodydivpid=bg/ppid=mask-bg/p/divinputtype=filescriptvarinput=document.querySelector(input),bg=document.querySelector(#bg),maskBg=document.querySelector(#mask-bginput.onchange=function()varsrc=getObjectURL(this.files0);setBg(src);functionsetBg(src)bg.style.backgroundImage=ur
5、l(+src+)maskBg.style.backgroundImage=url(+src+)*通过选择的文件获取其图片途径blob*paramfile*returns*functiongetObjectURL(file)varurl=null;if(window.createObjectURL!=undefined)url=window.createObjectURL(file)elseif(window.URL!=undefined)url=window.URL.createObjectURL(file)elseif(window.webkitURL!=undefined)url=wind
6、ow.webkitURL.createObjectURL(file)returnurl/script/body需要了解的是，我们在getObjectURL方法中使用了URL.createObjectURL接口来为所选文件生成对应的blob内容的URL，再将其赋给底图的background-image。其格式是这样的：最终整体效果如下：需要注意的是，这里的图片宽高值，以及遮罩图mask.png，都是根据我的手机分辨率来定制的，所以要使用该工具的话请自行修改样式和遮罩图片。该小工具挂在我的github仓库上，有需求的能够自助下载修改。Tips：1.这里无法保证成功率100%，尽量选择颜色较深、没有文字出现的照片，成功率会大一点；2.支付宝是有防刷措施的，天天都有领取红包的数量上限，所以要通过AR红包来发家致富是走不通了手动滑稽；3.如今破解起来很轻松的一个地方是，支付宝每次生成的条纹都是固定的条数、位置、粗度，讲不好以后会对这块进行优化，进而动态生成条纹，那本文的办法就不适用了mask.png无法适应。不过即便那样可以以走canvas来hack。其实阿里蛮多福利都能通过前端来hack，例如之前的（天猫双十一狂抢优惠券？机智的程序猿这么玩），开动脑筋想一想办法经常会出来这也是为何大公司做活动，都会慎重地加上防刷措施的原因。共勉