脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → llqrcode js识别解析二维码信息

llqrcode js识别二维码解析二维码信息实例

 更新时间：2022年11月10日 10:36:33   作者：TANKING  
这篇文章主要为大家介绍了llqrcode js识别二维码解析二维码信息实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

llqrcode.js具有扫描二维码功能，用来进行从图片中识别二维码，可解析二维码的信息。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>llqrcode识别二维码</title>
    <script src="llqrcode.js"></script>
    <script>
        function getUrl(e,param){
            analyticCode.getUrl(
                param,e,function(url,param){
                    document.querySelector("#uploadQrcode").style.display = "none";
                    document.querySelector("#uploadQrcode_preview").innerHTML ="<img src='"+param+"' />";
                    document.querySelector("#qrcodeUrl").innerHTML ="识别内容："+ url;
                    document.querySelector("#rescan").style.display = "block";
                }
            )
        }

        let getObjectURL = function(file){
            let 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 ;
        }
        window.analyticCode = {
            getUrl : function(type,elem,fn){
                let url = null,src = null;
                
                if(type === 'img-url'){
                    url = elem.src;
                }else if(type === 'file-url' && elem.files.length > 0){
                    url = getObjectURL(elem.files[0]);
                }
                qrcode.decode(url);
                qrcode.callback = function(imgMsg){
                    fn(imgMsg,url);
                }
            }
        }
    </script>
    <style>
        h3{
            text-align: center;
            margin-top: 100px;
        }
        #uploadQrcode{
            width: 80px;
            height: 80px;
            margin:20px auto 0;
            border: 2px dashed #ccc;
            border-radius: 20px;
            font-size: 25px;
            line-height: 80px;
            text-align: center;
            color: #ccc;
            position: relative;
            cursor: pointer;
        }
        #selectQrcode{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        #qrcodeUrl{
            text-align: center;
            margin-top: 15px;
        }
        #uploadQrcode_preview{
            width: 80px;
            height: 80px;
            margin:20px auto 0;
        }
        #uploadQrcode_preview img{
            width: 80px;
            height: 80px;
        }
        #rescan{
            text-align: center;
            text-decoration: none;
            color: #666;
            font-size: 15px;
            margin-top: 15px;
            display: none;
        }
    </style>
</head>
<body>
    <h3>选择一张二维码图片</h3>
    <div id="uploadQrcode">
        <span>+</span>
        <input type="file" id="selectQrcode" onChange="getUrl(this,'file-url')" />
    </div>
    <!-- 图片预览 -->
    <div id="uploadQrcode_preview"></div>
    <!-- 识别结果 -->
    <p id="qrcodeUrl"></p>
    <a href="" id=" rel="external nofollow" rescan">重新识别</a>
</body>
</html>

llqrcode.js下载

以上就是llqrcode js识别二维码解析二维码信息实例的详细内容，更多关于llqrcode js识别解析二维码信息的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • js实现日历的简单算法

    js实现日历的简单算法

    这篇文章主要为大家详细介绍了js实现日历的简单算法，用js写了一套日历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JS从非数组对象转数组的方法小结

    JS从非数组对象转数组的方法小结

    这篇文章主要给大家介绍了关于JS从非数组对象转数组的一些方法，分别是Array.prototype.slice.call(obj)、Array.from(obj)、[…obj]和Object.values(obj)等方法的详细实现方法，需要的朋友可以参考下。
    2018-03-03
  • JavaScript中forEach和map方法的使用与区别

    JavaScript中forEach和map方法的使用与区别

    众所周知map和forEach是数组的操作方法,下面这篇文章主要给大家介绍了关于JavaScript中forEach和map方法的使用与区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 前端传参的三种方式实战案例

    前端传参的三种方式实战案例

    近期公司采用前后端分离的方式开发系统,面临前后端传值方式的统一约定,该篇文章针对几种传值方式做了汇总,这篇文章主要给大家介绍了关于前端传参的三种方式,需要的朋友可以参考下
    2024-08-08
  • 使用auto.js实现自动化每日打卡功能

    使用auto.js实现自动化每日打卡功能

    这篇文章主要介绍了使用auto.js实现自动化每日打卡,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-08-08
  • 浅谈webpack和webpack-cli模块源码分析

    浅谈webpack和webpack-cli模块源码分析

    这篇文章主要介绍了浅谈webpack和webpack-cli模块源码分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JS实现纵向轮播图（初级版）

    JS实现纵向轮播图（初级版）

    这篇文章主要为大家详细介绍了JS实现纵向轮播图的初级版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JavaScript实现弹出窗口效果

    JavaScript实现弹出窗口效果

    这篇文章主要为大家详细介绍了JavaScript实现弹出窗口效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 很不错的两款Bootstrap Icon图标选择组件

    很不错的两款Bootstrap Icon图标选择组件

    这篇文章主要介绍了不容错过的两款Bootstrap Icon图标选择组件，支持自定义的图标，拿出来分享下，绝对的干货，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 关于JavaScript中forEach和each用法浅析

    关于JavaScript中forEach和each用法浅析

    这篇文章主要给大家介绍了关于JavaScript中forEach和each使用方法的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07

最新评论