近期阿里搞了各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] 元件來實現即可。
直接貼程式碼吧：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<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，例如之前的《天貓雙十一狂搶優惠券？機智的程式猿這麼玩》，開動腦筋想一想辦法經常會出來（這也是為何大公司做活動，都會謹慎地加上防刷措施的原因）。共勉~