微信網頁中 多個二維碼的識別

微信網頁中 長按識別二維碼時 若是同一頁面中有多個二維碼 會隨機識別一個二維碼的狀況..這種情況是不能忍受的..

在度娘上面搜索一些相關信息,有人說 微信識別二維碼的機制是 先整張頁面截圖,在分析圖中的二維碼(原諒我不記得出處了)..既然多是這種機制,那應對起來也就方便一些了

先說一下思路:

###假如頁面中有兩張二維碼,當點按 A 二維碼時,將 B 二維碼加一個遮罩層,這樣在微信截圖到的頁面中,只有 A 是一個很明顯的二維碼..識別出 A 二維碼的概率就會高上不少

具體代碼以下

$('li').on('touchstart',function(){
    $(this).siblings('li').find('.mask_img').css({'display':'block'});
});
$('li').on('touchend',function(){
    $(this).siblings('li').find('.mask_img').css({'display':'none'});
});

<li class="left fl" style="position:relative;">
    <img src="4_07.png" class="jointly_one" alt="img">
    <div class="mask_img"></div>
    <img src="123_logo.png" class="jointly_two" alt="img">
</li>
<li class="right fl" style="position:relative;">
    <img src="4_09.png" class="jointly_one" alt="img">
    <div class="mask_img"></div>
    <img src="logo.png" class="jointly_two" alt="img">
</li>

.mask_img{ background: rgba(0,0,0,0.9);width:6.4rem; height:6.4rem; position: absolute; top:0; left:0; display: none;}

經測試 rgba 屬性設置 爲0.9時 識別率幾乎百分之百

特別感謝前端同窗任航將想法化做實際