基于上一篇微信长按识别二维码 -- 页面多个二维码如何识别?
)在部分设备上,如果图片非常多,还是会出现识别错误的bug(主要是二维码显示一半或居于底部时),修改了识别流程,改为点击图片弹窗,然后长按识别。
![9166166-27de4806ce03052a.png](https://i-blog.csdnimg.cn/blog_migrate/4a24df48fb68b848532687db6014a430.png)
微信长按识别二维码
页面布局,在列表页上覆盖一层大图div
<div id="tempQrCodeImgDiv" style="width:100%;height:100%; position:fixed; display:none;background:#efeff4;z-index:90;">
<div style="text-align:center; font-size: 22px; margin-top:30px; color:#ff560e">长按图片识别二维码</div>
<img id="tempQrCodeImg" src="" style="width: 80%; margin-top:30px; margin-left:10%;z-index:100" />
<div id="tempQrCodeName" style="text-align:center; font-size: 18px; margin-top:16px; color:#434243;" ></div>
<div id="tempQrCodeDismissBtn" style="text-align:center; font-size: 18px; margin-left:20%;margin-right:20%; margin-top:50px; padding: 10px 20px;border-radius: 5px; background:none; border: 1px #555 solid; color:#434243;">返 回</div>
</div>
<div style="text-align:center; font-size: 22px; margin-top:30px; color:#ff560e">单击图片放大后长按识别</div>
然后是列表页,与上文基本一致:
for (var i = 0; i < Model.settings.Count; i = i + 2)
{
<div class="ne-cell flex">
<div class="ne-grids col3 " style="flex:1">
<div name="qrCodeImgDiv" style="text-align:center; width: 80%; margin-left:10%; margin-top:20px;">
<img name="qrCodeImg" src="~/@Model.settings[i].QrCodePath" style="width: 100%; pointer-events: none;" alt="@Model.settings[i].Name"/>
</div>
<div id="div-name" style="text-align:center; margin-top:16px; color:#434243">@Model.settings[i].Name</div>
</div>
<div class="ne-grids col3 " style="flex:1">
@if (i < Model.settings.Count - 1 && !string.IsNullOrEmpty(Model.settings[i + 1].QrCodePath))
{
<div name="qrCodeImgDiv" style="text-align:center; width: 80%; margin-left:10%; margin-top:20px; z-index:100">
<img name="qrCodeImg" src="~/@Model.settings[i+1].QrCodePath" style="width: 100%; pointer-events: none; " alt="@Model.settings[i + 1].Name" />
</div>
<div id="div-name" style="text-align:center; margin-top:16px; color:#434243">@Model.settings[i + 1].Name</div>
}
</div>
</div>
}
最后是js
function load() {
var imgs = document.getElementsByName("qrCodeImgDiv");
for (var i = 0; i < imgs.length; i++) {
imgs[i].addEventListener("click", function () {
var qrCodeImg = this.getElementsByTagName("img")[0];
document.getElementById("tempQrCodeImg").src = qrCodeImg.src;
document.getElementById("tempQrCodeName").textContent = qrCodeImg.alt;
document.getElementById("tempQrCodeImgDiv").style.display = 'block';
})
}
document.getElementById("tempQrCodeDismissBtn").addEventListener("click", function () {
document.getElementById("tempQrCodeImg").src = "";
document.getElementById("tempQrCodeName").textContent = "";
document.getElementById("tempQrCodeImgDiv").style.display = 'none';
})
}
window.addEventListener('load', load, false);
大部分样式都在代码中写成style了,列表页比较简答,用的css没有改过来,自己对应加下就ok了;毕竟这里主要是提供思路。
最终效果如下图:
![9166166-6dfe66d9fd0b7d80.gif](https://i-blog.csdnimg.cn/blog_migrate/71fad6aedc302f74a6f304eab9790f51.gif)
长按识别多个二维码.gif
ps:相对于之前代码,用户操作变得繁琐了,但是,在图片非常多时不会出现识别错误的bug;如果只有1~4张二维码,可以使用之前的版本长按二维码识别1;如果是图片较多,一页5-6张图片,而且有多页,则使用本文所述方法!当然,如果有更好的方案解决该问题,欢迎留言,多谢!
博客: IT老五 简书:ThinkinLiu
![9166166-931fd471780b7e64.jpg](https://i-blog.csdnimg.cn/blog_migrate/b288143c073dc4fae7cb7a839f414c4a.jpeg)
IT老五(it-lao5):关注公众号,一起源创,一起学习!