近期阿里搞了各LBS+AR實景的紅包玩法，小夥伴們在公司裏都玩瘋了~
有時候爲了搶一個紅包，會跑到另一個地方去拍照，雖然略麻煩，但整體的互動還是很有意思的。
不過對於機智的前端童鞋來說，只需要簡單的一段代碼就能破解AR紅包（當然成功率也不是100%）。
破解原理見《上線僅一天：支付寶AR紅包慘遭技術流破解》（https://news.cnblogs.com/n/559670/），感謝這位設計師童鞋。
我們要做的事情其實很簡單 —— 把系統自帶的小橫條都去掉，去掉的部分取其附近的圖片內容來填充，最終得到的效果圖有不小的機率會被識別爲匹配成功：
對於上圖中間那塊區域，我們可以通過固定的輪廓對底圖進行遮罩得出。
所以對於前端而言，我們可以通過這樣的 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：
- 這裏無法保證成功率100%，儘量選擇顏色較深、沒有文字出現的照片，成功率會大一點；
- 支付寶是有防刷措施的，每天都有領取紅包的數量上限，所以要通過AR紅包來發家致富是走不通了（手動滑稽）；
- 現在破解起來很輕鬆的一個地方是，支付寶每次生成的條紋都是固定的（條數、位置、粗度），說不好以後會對這塊進行優化，進而動態生成條紋，那本文的辦法就不適用了（mask.png無法適應）。不過即使那樣也可以走canvas來hack。
