• 亿博APP官网

  • 亿博APP官网

  • 亿博APP官网

  • 亿博APP官网

亿博APP官网

作者︰vajoy  發布日期(qi)︰2020-02-22 06:44:31
Tag標(biao)簽︰前端  紅包  
  • 近(jin)期(qi)阿里搞(gao)了(liao)各LBS+AR實景的(de)紅包玩法(fa),小伙伴們在(zai)公司里都(du)玩瘋了(liao)~

    有時候為了(liao)搶一(yi)個紅包,會跑到另(ling)一(yi)個地方(fang)去(qu)拍照,雖然略yue)櫸fan),但整體的(de)互動(dong)還(huai)是很有意(yi)思的(de)。

    不(bu)huai)dui)于(yu)機智的(de)前端童(tong)鞋來說,只需要簡單(dan)的(de)一(yi)段代碼就(jiu)能破解(jie)AR紅包(當然成(cheng)功率也不(bu)是100%)

    破解(jie)原理(li)見《上線僅(jin)一(yi)天︰支付寶AR紅包慘yi)餳際趿髕平jie)》,感謝這位(wei)設計師童(tong)鞋。

    我們要做(zuo)的(de)事情其實很簡單(dan) —— 把系統自帶的(de)小橫(heng)條都(du)去(qu)掉(diao),去(qu)掉(diao)的(de)部分取其附近(jin)的(de)圖片內(na)容(rong)來填充,最終得(de)到的(de)效(xiao)果圖jia)脅bu)小的(de)幾率會被識(shi)別為匹配(pei)成(cheng)功︰

    對(dui)于(yu)上圖中間那塊區域(yu),我們可以(yi)通過固定的(de)輪(lun)廓(kuo)對(dui)底圖進行遮(zhe)罩得(de)出(chu)。

    所(suo)以(yi)對(dui)于(yu)前端而言,我們可以(yi)通過這樣(yang)的(de) DOM 結構來實現如上需求(qiu)︰

    其中 C 和 B 其實是同一(yi)個背景(即搶紅包頁面的(de)手(shou)機截圖),A 是一(yi)個遮(zhe)罩輪(lun)廓(kuo),會對(dui) B 進行剪輯獲(huo)得(de)非條紋部分的(de)圖片內(na)容(rong)。同時 B 再(zai)相對(dui) C 進行垂直偏移,用(yong)自身被剪輯後的(de)內(na)容(rong)擋住 C 的(de)條紋。

    根據圖片alpha通道來做(zuo)遮(zhe)罩的(de)能力,我們可以(yi)使用(yong) CSS3 的(de) mask-image 特性來實現,其具(ju)體應用(yong)在(zai)我之前《巧用(yong) mask-image 實現簡單(dan)進度加(jia)載界面》一(yi)文中已做(zuo)了(liao)詳細介(jie)紹︰

    本文不(bu)再(zai)贅(zhui)述該 CSS3 特性。

    另(ling)外還(huai)有一(yi)點小需求(qiu) —— 希(xi)望 B 和 C 的(de)底圖可以(yi)動(dong)態更換。這個我們使用(yong) input[type=file] 組件來實現即可。

    直接(jie)貼代碼吧(ba)︰

    <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 + ')'; } /** * 通過選擇(ze)的(de)文件獲(huo)取其圖片路徑(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>

    需要了(liao)解(jie)的(de)是,我們在(zai) getObjectURL 方(fang)法(fa)中使用(yong)了(liao) URL.createObjectURL 接(jie)口來為所(suo)選文件生成(cheng)對(dui)應的(de) blob 內(na)容(rong)的(de)URL,再(zai)將其賦給底圖的(de) background-image。其格(ge)式(shi)是這樣(yang)的(de)︰

    最終整體效(xiao)果如下︰

    需要注意(yi)的(de)是,這里的(de)圖片寬高值,以(yi)及(ji)遮(zhe)罩圖 mask.png,都(du)是根據我的(de)手(shou)機分辨率來定制的(de),所(suo)以(yi)要使用(yong)該工具(ju)的(de)話(hua)請自行修改樣(yang)式(shi)和遮(zhe)罩圖片。

    該小工具(ju)掛(gua)yi)zai)我的(de) github 倉庫上xi) 行棖qiu)的(de)可以(yi)自助(zhu)下載修改。

    Tips︰1. 這里無(wu)法(fa)保證成(cheng)功率100%,盡量(liang)選擇(ze)顏色較深、沒有文字出(chu)現的(de)照片,成(cheng)功率會大一(yi)點;2. 支付寶是有防(fang)刷措(cuo)施的(de),每天都(du)有領取紅包的(de)數量(liang)上限(xian),所(suo)以(yi)要通過AR紅包來發家致富是走不(bu)通了(liao)(手(shou)動(dong)滑(hua)稽);3. 現在(zai)破解(jie)起來很輕松的(de)一(yi)個地方(fang)是,支付寶每kan)紊cheng)的(de)條紋都(du)是固定的(de)(條數、位(wei)置、粗(cu)度),說不(bu)好以(yi)後會對(dui)這塊進行優化,進而動(dong)態生成(cheng)條紋,那本文的(de)辦法(fa)就(jiu)不(bu)適用(yong)了(liao)(mask.png無(wu)法(fa)適應)。不(bu)huai)詞鼓茄yang)也可以(yi)走canvas來hack。

    其實阿里蠻多福利都(du)能通過前端來hack,例如之前的(de)《天貓雙(shuang)十一(yi)狂搶優惠券?機智的(de)程序猿這麼玩》,開動(dong)腦筋想一(yi)想辦法(fa)經常會出(chu)來(這也cai)俏 未蠊 咀zuo)活(huo)動(dong),都(du)會謹(jin)慎地加(jia)上防(fang)刷措(cuo)施的(de)原因)。共(gong)勉~

About IT165 -廣告服務 -隱私聲明 -版權申(shen)明 -免責條款 -網站地圖 -網友投稿 -聯系方(fang)式(shi)
本站內(na)容(rong)來自于(yu)互聯網,僅(jin)供用(yong)于(yu)網絡技術學習,學習中請遵(zun)循(xun)相關法(fa)律法(fa)規
亿博APP官网 | 下一页