llqrcode js识别二维码解析二维码信息实例
更新时间：2022年11月11日 17:02 点击：1045 作者：TANKING
正文
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识别解析二维码信息的资料请关注猪先飞其它相关文章！
原文出处：https://segmentfault.com/a/1190000042758897
相关文章
- 最近做了个扫描二维码得到vcard的项目，遇到一个问题，有一部分生成完的二维码，用android系统手机扫描后得到的vcard中的中文姓名是乱码，经过比对发现，这部分vcard中ORG这个...2016-11-25
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06
- 本文介绍两种使用 php 生成二维码的方法。 （1）利用google生成二维码的开放接口，代码如下： /** * google api 二维码生成【QRcode可以存储最多4296个字母数字类型的任意文本，具体可以查看二维码数据格式】 * @param strin...2015-10-21
- 作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办，不知道具体解决办法的下面跟小编一起来看看。 因项目需要，需要Node.js与PHP做接口调用，发现nod...2017-07-06
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09
- 为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03
- v-for标签可以用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。...2017-06-15