支付寶AR搶紅包？前端輕松就破解
近期阿里搞了各LBS+AR實景的紅包玩法，小伙伴們在公司里都玩瘋了~
有時候為了搶一個紅包，會跑到另一個地方去拍照，雖然略麻煩，但整體的互動還是很有意思的。
不過對于機智的前端童鞋來說，只需要簡單的一段代碼就能破解AR紅包（當(dāng)然成功率也不是100%）。
破解原理見《上線僅一天：支付寶AR紅包慘遭技術(shù)流破解》（https://news.cnblogs.com/n/559670/），感謝這位設(shè)計師童鞋。
我們要做的事情其實很簡單 —— 把系統(tǒng)自帶的小橫條都去掉，去掉的部分取其附近的圖片內(nèi)容來填充，最終得到的效果圖有不小的幾率會被識別為匹配成功：
對于上圖中間那塊區(qū)域，我們可以通過固定的輪廓對底圖進行遮罩得出。
所以對于前端而言，我們可以通過這樣的 DOM 結(jié)構(gòu)來實現(xiàn)如上需求：
其中 C 和 B 其實是同一個背景（即搶紅包頁面的手機截圖），A 是一個遮罩輪廓，會對 B 進行剪輯獲得非條紋部分的圖片內(nèi)容。同時 B 再相對 C 進行垂直偏移，用自身被剪輯后的內(nèi)容擋住 C 的條紋。
根據(jù)圖片alpha通道來做遮罩的能力，我們可以使用 CSS3 的 mask-image 特性來實現(xiàn)，其具體應(yīng)用在我之前《巧用 mask-image 實現(xiàn)簡單進度加載界面》一文中已做了詳細介紹：
本文不再贅述該 CSS3 特性。
另外還有一點小需求 —— 希望 B 和 C 的底圖可以動態(tài)更換。這個我們使用 input[type=file] 組件來實現(xiàn)即可。
直接貼代碼吧：
- <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 接口來為所選文件生成對應(yīng)的 blob 內(nèi)容的URL，再將其賦給底圖的 background-image。其格式是這樣的：
最終整體效果如下：
需要注意的是，這里的圖片寬高值，以及遮罩圖 mask.png，都是根據(jù)我的手機分辨率來定制的，所以要使用該工具的話請自行修改樣式和遮罩圖片。
該小工具掛在我的 github 倉庫上，有需求的可以自助下載修改。
Tips：
1. 這里無法保證成功率100%，盡量選擇顏色較深、沒有文字出現(xiàn)的照片，成功率會大一點；
2. 支付寶是有防刷措施的，每天都有領(lǐng)取紅包的數(shù)量上限，所以要通過AR紅包來發(fā)家致富是走不通了（手動滑稽）；
3. 現(xiàn)在破解起來很輕松的一個地方是，支付寶每次生成的條紋都是固定的（條數(shù)、位置、粗度），說不好以后會對這塊進行優(yōu)化，進而動態(tài)生成條紋，那本文的辦法就不適用了（mask.png無法適應(yīng)）。不過即使那樣也可以走canvas來hack。
