溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用llqrcode.js識別二維碼解析二維碼信息

發(fā)布時間：2022-11-11 09:20:20 來源：億速云 閱讀：167 作者：iii 欄目：開發(fā)技術(shù)

這篇“怎么用llqrcode.js識別二維碼解析二維碼信息”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么用llqrcode.js識別二維碼解析二維碼信息”文章吧。

正文

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 ="識別內(nèi)容："+ 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>
        h4{
            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>
    <h4>選擇一張二維碼圖片</h4>
    <div id="uploadQrcode">
        <span>+</span>
        <input type="file" id="selectQrcode" onChange="getUrl(this,'file-url')" />
    </div>
    <!-- 圖片預(yù)覽 -->
    <div id="uploadQrcode_preview"></div>
    <!-- 識別結(jié)果 -->
    <p id="qrcodeUrl"></p>
    <a href="" id=" rel="external nofollow" rescan">重新識別</a>
</body>
</html>

以上就是關(guān)于“怎么用llqrcode.js識別二維碼解析二維碼信息”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手