• 熱門專題

支付寶AR搶紅包?前端輕松就破解~

作者:vajoy  發布日期:2016-12-26 20:23:31
Tag標簽:前端  紅包  
  • 近期阿里搞了各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] 組件來實現即可。

    直接貼代碼吧:

    <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,例如之前的《天貓雙十一狂搶優惠券?機智的程序猿這么玩》,開動腦筋想一想辦法經常會出來(這也是為何大公司做活動,都會謹慎地加上防刷措施的原因)。共勉~

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
彩票联盟网站历史| 子长县|