溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“怎么用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 ="識別內容："+ 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>
<!-- 圖片預覽 -->
<div id="uploadQrcode_preview"></div>
<!-- 識別結果 -->
<p id="qrcodeUrl"></p>
<a href="" id=" rel="external nofollow" rescan">重新識別</a>
</body>
</html>以上就是關于“怎么用llqrcode.js識別二維碼解析二維碼信息”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
