精华内容
下载资源
问答
  • 基于上一篇微信长按识别二维码 -- 页面多个二维码如何识别? )在部分设备上,如果图片非常多,还是会出现识别错误的bug(主要是二维码显示一半或居于底部时),修改了识别流程,改为点击图片弹窗,然后长按识别。 ...

    基于上一篇微信长按识别二维码 -- 页面多个二维码如何识别?
    )在部分设备上,如果图片非常多,还是会出现识别错误的bug(主要是二维码显示一半或居于底部时),修改了识别流程,改为点击图片弹窗,然后长按识别

    微信长按识别二维码

     

    页面布局,在列表页上覆盖一层大图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;">返&emsp;回</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了;毕竟这里主要是提供思路。

    最终效果如下图:

    长按识别多个二维码.gif

     

    ps:相对于之前代码,用户操作变得繁琐了,但是,在图片非常多时不会出现识别错误的bug;如果只有1~4张二维码,可以使用之前的版本长按二维码识别1;如果是图片较多,一页5-6张图片,而且有多页,则使用本文所述方法!当然,如果有更好的方案解决该问题,欢迎留言,多谢!

    博客: IT老五 简书:ThinkinLiu


    IT老五(it-lao5):关注公众号,一起源创,一起学习!

     

    展开全文
  • 常规的在公众号html页面中要实现长按识别二维码,直接使用...然而,当同一个页面有多个二维码时,会出现怎样的情况呢? 今天碰到的需求中就在同一个页面有三个二维码,按照上面的方法,写了三个img,长按不同二维...

    常规的在公众号html页面中要实现长按识别二维码,直接使用img显示图片就可以了,如下:

    <img name="qrCodeImg" src="/images/itlao5.jpg" style="width: 80%;" />
    

    然而,当同一个页面有多个二维码时,会出现怎样的情况呢?

    今天碰到的需求中就在同一个页面有三个二维码,按照上面的方法,写了三个img,长按不同二维码img打开不同的公众号或小程序。然而,实际的效果与想象中的有点差别:在部分手机上,不管长按哪个img,都是识别了第一个img,试了三台手机,除了华为P20正常,VIVO和华为X5都出现该问题,后来测试P20在部分情况下也有该问题。
    不知道怎么回事,网上一顿搜索,说是二维码识别功能是先截屏然后在识别截取的图片,然后结合我P20正常的情况,应该是截取了点击位置附近一定像素的屏幕,然后进行识别。如果该截屏区域内有多个二维码,会识别到第一个,这就造成了同一屏内多个二维码识别出错的问题。

    然后想解决思路,方案有三种:

    1. 二维码间隔拉大,保证同一屏内只显示一个完整的二维码;
    2. 先弄个二维码列表(不用img,用background放图片),然后点击二维码打开详情页(或者弹出层) ,长按详情页或弹出层img识别
    3. 既然是截屏识别第一个完整二维码,那在截屏时将点击的img图片显示到顶部,是否可以实现想要的功能。

    方案1和方案2毕竟在用户体验上不怎么好,只作为备用方案,我们重点看方案3:整体思路是这样的,在顶部加一个临时img,用于显示当前长按的二维码。然后监听所有img的touch事件,当按下去时,延时300ms显示图片(延迟300ms是为了防止该touch是滑动事件,而不是长按事件),如果移动了则不再显示,然后touch事件结束后也隐藏图片;另外,在长按时,html中是无法触发touchend事件的,因为被手机原生事件截断,所以需要监听touchcancel事件,该事件触发时也隐藏图片。需要注意的是,因为长按后微信需要截屏,所以隐藏事件需要延时500~1000ms。

    实际效果如下:

    9166166-fee48b39ee2eb1b5.gif

     

    以下是js和html核心代码:

    ~~~
        <script type="text/javascript">
            function load() {
                var imgs = document.getElementsByName("qrCodeImg");
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].addEventListener("touchstart", touchstart, false);
                    imgs[i].addEventListener("touchend", touchend, false);
                    imgs[i].addEventListener("touchmove", touchmove, false);
                    imgs[i].addEventListener("touchcancel", touchcancel, false);
                }
    
                function touchstart(e) {
                    showTempQrCodeImg();
                }
    
                function touchmove(e) {
                    dismissTempQrCodeImg();
                }
    
                function touchend(e) {
                    dismissTempQrCodeImg();
                }
    
                function touchcancel(e) {
                    dismissTempQrCodeImg();
                }
    
                var timeoutId = 0;
                function showTempQrCodeImg() {
                    var currentSrc = this.src;
                    timeoutId = setTimeout(function () {
                        var oInp2 = document.getElementById("tempQrCodeImg");
                        oInp2.src = currentSrc;
                        oInp2.style.display = 'block';
                        show = true;
                    }, 300);
                }
    
                function dismissTempQrCodeImg() {
                    clearTimeout(timeoutId);
                    setTimeout(function () {
                        var oInp2 = document.getElementById("tempQrCodeImg");
                        oInp2.src = '';
                        oInp2.style.display = 'none';//ios上光设置src=''无法隐藏图片,需要设置display
                        show = false;
                    }, 1000);
                }
                
            }
            window.addEventListener('load', load, false);
        </script>
    
    <!--临时二维码展示img, 注意id为tempQrCodeImg及设置position:fixed;z-index:100;这里设置width: 80%比普通图片大,因为设置太小会造成在ios上第一张图片左右部分识别为不同的二维码-->
    <img id="tempQrCodeImg" src="" style="width: 80%; position:fixed; left:10%;z-index:100" />
    <!--实际二维码展示img,注意所有的name都是qrCodeImg-->
    <img name="qrCodeImg" src="/Content/images/it-lao5.jpg" style="width: 40%;" />
    ~~~

    简书:ThinkinLiu 博客: IT老五


    9166166-931fd471780b7e64.jpg
    IT老五(it-lao5):关注公众号,一起源创,一起学习!

     

    展开全文
  • 微信网页中 多个二维码识别

    千次阅读 2016-08-03 14:30:00
    微信网页中 长按识别二维码时 如果同一页面中有多个二维码 会随机识别一个二维码的情况..这种状况是不能忍受的.. 在度娘上面搜索一些相关信息,有人说 微信识别二维码的机制是 先整张页面截图,在分析图中的二维码...

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

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

    先说一下思路:

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

    特别感谢前端同学任航将想法化作实际

    转载于:https://my.oschina.net/razox/blog/726480

    展开全文
  • 模糊二维码识别如果不想看累赘啰嗦的可直接点下面已搭建好的环境进行识别二维码,目前只开放了QR Code 如果不想看累赘啰嗦的可直接点下面已搭建好的环境进行识别二维码,目前只开放了QR Code 首先 大概说一下工业...

    如果不想看累赘啰嗦的可直接点下面已搭建好的环境进行识别二维码,目前只开放了QR Code

    首先
    市面专用读码器如:康耐视,基恩士读取模糊二维码效果不错,但是大家都知道品牌读码器一般在1.5万-2万之间,如果有软件版本就再好不过了。
    大概说一下工业相机常见的几种格式分别有bayerBG,bayerGB,bayerGR,BRG10packed ,MONO8,RGB8packed等等,其中我们最常用的是MONO8了,MONO8本身就是就是灰度图像了,这对于下一步的识别可减少一步图像灰度话的操作,但是如果你需要保存图像需要额外加上头部信息,因为MONO8的格式是不带图像头,这可能是由于节省空间占用的缘故,要知道相机传输字节流越小越好。
    然后
    我们就需要对图像进行预处理操作,一般来说有滤波去噪、边缘检测、定位矫正,图像二值化等操作,图像预处理需要根据二维码的模糊程度来进行,对于这一步可以在设计软件时预留几种识别模式:标准识别,加强识别等,识别越强进行的预处理越多,越复杂。
    最后
    等所有的前奏都准备完了就开始进行识别,识别控件无非就是zbar,zxing等等,废话说了这么多,下面提供一个在线识别的地址供大家进行测试
    上传3张模糊图
    在这里插入图片描述在这里插入图片描述 在这里插入图片描述
    点进去下载dll及DEMO
    http://www.o20.net/MFCQRReader.rar
    有需要请下载

    展开全文
  • 二维码批量识别解码py脚本, 将需要扫描的二维码放到一文件夹下,修改python路径即可。 使用到 import os import zxing 这是因做ctf题碰见很多二维码需要识别而做的。
  • 做串口屏幕开的过程中使用的二维码为深色背景,突然发现APP的二维码识别模块无法识别。原来真的不是二维码想大就大,想什么颜色就什么颜色! 深色背景二维码(除了微信外其他扫码设备无法识别) 浅色背景...
  • Android二维码识别

    2013-08-21 16:42:37
    Andorid二维码识别,绝对可以成功的例子
  • MVS同时读取多个二维码

    千次阅读 2016-11-11 22:03:31
    一次拍照,同时读取多个二维码也非常常见。笔者这次 讲述如何使用机器视觉大师一次读取多个二维码的过程。   感兴趣的读者可以尝试使用机器视觉大师自己操作,可以实现仓库产品入库或出库 的信息登记,免除手工...
  • 二维码识别

    千次阅读 2019-05-20 19:36:43
    1、定位图形:首先寻找探测图形,就是二维码上的三方块。这三方块的作用就是不管在哪个方向扫描图形,都可以扫到,不信可以将手机翻转测试一下。在通过二维码上的定位图形和分隔符确定二维码信息的图像。定位...
  • zxing扫描二维码还可以,但是识别本地图片二维码功能效果太差,非常不理想,看了看github很zxing扩展的开源项目,识别本地图片二维码功能效果不乐观,有些甚至还有裁剪本地图片,还是不能识别,果断放弃 ...
  • ===============生成二维码============== /** 生成二维码,生成条形码 // =======生成二维码======== ... // 通常CIFilter对象需要一个或多个图像作为输入,并产生CIImage类型的实体作为输出。而...
  • 二维码识别

    千次阅读 2018-12-06 09:58:10
    版权声明:本文为博主原创文章,未经博主允许不得转载。...二维码 (2-dimensional bar code),是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的。 在许多种类...
  • zxing是一个二维码生成与识别的开源库,在项目里遇到需要解析一个图片里包含了多个二维码的情况,代码很简单,主要使用了zxing的QRCodeMultiReader类,需要注意的是每个二维码要用grid隔开,不然将识别不了二维码。...
  • php 二维码在线识别api

    2018-06-09 15:40:00
    访照草料做了个二维码识别的api 增加缓存记忆功能以便次请求调...
  • 笔者日常: 第一次用markdown写文章,有点手生~ 声明: 此工具类由本人二次整理改造后分享给大家,原编写者未知,虽然本人重写了大部分逻辑代码,但是核心部分仍然是采用的原来... 生成二维码: 方式一: 执行方...
  • 基于多二维码识别的三维运动真值获取1.背景介绍2.原理2.1图像预处理2.2 定位标轮廓提取2.3 二维码鲁棒识别3 运行结果3.1对单张图片进行多二维码识别3.2 获取一系列图片的轨迹 1.背景介绍 使用视觉slam...
  • 支持扫描两行两列一共四个二维码,按照左上-右上-左下-右下顺序输出二维码扫描结果。 原理就是把camera预览得到的data数据,分割为4个data,分别进行Zxing分析。
  • 多个二维码的图片读取返回数组,在异常里处理 public static String decode(File file) throws Exception { BufferedImage image; image = ImageIO.read(file); if (image == null) { return nul...
  • 二维码及其识别技术

    千次阅读 2015-04-02 11:28:18
    二维码及其识别技术 什么是二维码  二维条码是指在一维条码的基础上扩展出另一维具有可读性的条码,使用黑白矩形图案表示二进制数据,被设备扫描后可获取其中所包含的信息。一维条码的宽度记载着数据,而其...
  • 在之前的一篇二维码识别的文章中有人问到识别多个二维码该怎么做。我看了看以前的那篇原文,有够水的,今天放一篇多类型解码以及解码多个二维码的代码。 我直接贴我以前用过已经封装好了的代码吧,也是按以前业务...
  • Android二维码识别技术

    2017-08-27 14:04:59
    二维码识别
  • 1、需求  在项目中h5页面内有文章资讯模块,文章详情页里面底部放了公司二维码,然后用户分享的时候,会带上分享...也就是只能识别其中一个二维码 3、分析 微信识别二维码的原理机制  这里采用的逻辑...
  • zxing扫描二维码识别图片二维码及其优化策略 Posted on 2016-01-08 | In Android | | Visitors | 20213二维码介绍Android中用于二维码相关的库比较少,并且大多数已经不再维护(具体可见...
  • 目录前言扫一扫识别二维码图片长按图片识别二维码图片生成二维码图片代码完善识别二维码图片优化小结 ...但发现ZXing识别从相册中来的图片性能很差,很图片识别不了,且耗时较长,遂使用ZBar来实现识别从相册...
  • 现在很App都集成了扫一扫功能,最常用的微信、QQ等。那么今天我们就来看看怎么样在我们自己的App中集成二维码的扫描与生成功能。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 56,727
精华内容 22,690
关键字:

多个二维码同时识别