关于javascript:llqrcodejs识别二维码解析二维码信息

2次阅读

共计 1946 个字符，预计需要花费 5 分钟才能阅读完成。

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="rescan"> 从新辨认 </a>
</body>
</html>

llqrcode.js 下载：https://likeyun.lanzout.com/i…

正文完