微信网页中 多个二维码的识别

微信网页中 长按识别二维码时 若是同一页面中有多个二维码 会随机识别一个二维码的状况..这种情况是不能忍受的..

在度娘上面搜索一些相关信息,有人说 微信识别二维码的机制是 先整张页面截图,在分析图中的二维码(原谅我不记得出处了)..既然多是这种机制,那应对起来也就方便一些了

先说一下思路:

###假如页面中有两张二维码,当点按 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时 识别率几乎百分之百

特别感谢前端同窗任航将想法化做实际