怎么用llqrcode.js识别二维码解析二维码信息
短信预约 -IT技能 免费直播动态提醒
这篇“怎么用llqrcode.js识别二维码解析二维码信息”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么用llqrcode.js识别二维码解析二维码信息”文章吧。
正文
llqrcode.js具有扫描二维码功能,用来进行从图片中识别二维码,可解析二维码的信息。
代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>llqrcode识别二维码</title> <script class="lazy" data-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 class="lazy" data-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,class="lazy" data-src = null; if(type === 'img-url'){ url = elem.class="lazy" data-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识别二维码解析二维码信息”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341