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>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>

作者：TANKING

llqrcode.js下载：

javascript - llqrcode.js识别二维码，解析二维码信息_个人文章 - SegmentFault 思否

llqrcode.js识别二维码，解析二维码信息相关推荐

【深度学习模型】智云视图中文车牌识别源码解析(二)
[深度学习模型]智云视图中文车牌识别源码解析(二) 感受 HyperLPR可以识别多种中文车牌包括白牌,新能源车牌,使馆车牌,教练车牌,武警车牌等. 代码不可谓不混乱(别忘了这是职业公司的准产品级代码 ...
Mobx 源码解析二（autorun)
前言我们在Mobx 源码解析一(observable)已经知道了observable 做的事情了, 但是我们的还是没有讲解明白在我们的Demo中,我们在Button 的Click 事件中只是对ba ...
erlang下lists模块sort（排序）方法源码解析(二)
上接erlang下lists模块sort(排序)方法源码解析(一),到目前为止,list列表已经被分割成N个列表,而且每个列表的元素是有序的(从大到小) 下面我们重点来看看mergel和rmergel ...
Kubernetes学习笔记之Calico CNI Plugin源码解析(二)
女主宣言今天小编继续为大家分享Kubernetes Calico CNI Plugin学习笔记,希望能对大家有所帮助. PS:丰富的一线技术.多元化的表现形式,尽在"360云计算" ...
android网络框架retrofit源码解析二
注:源码解析文章参考了该博客:http://www.2cto.com/kf/201405/305248.html 前一篇文章讲解了retrofit的annotation,既然定义了,那么就应该有解析的 ...
Thrift源码解析(二)序列化协议
概述对于一个RPC框架,定义好网络数据的序列化协议是最基本的工作,thrift的序列化协议主要包含如下几种: TBinaryProtocol TCompactProtocol TJSONProtoc ...
源码解析_List源码解析
点击上方「10分钟编程」关注我呦让我们在一起每天「博学」一点点,成为更好的自己! List源码解析本篇文章有点长,所以先列个目录 List源码解析 1.ArrayList 2.LinkedList ...
yolov3之pytorch源码解析_springmvc源码架构解析之view
说在前面前期回顾 sharding-jdbc源码解析更新完毕 spring源码解析更新完毕 spring-mvc源码解析更新完毕 spring-tx源码解析更新完毕 spring-boot源 ...
Kafka核心源码解析 - KafkaController源码解析
在进入源码解析之前,我先来介绍一些KafkaController在Kafka集群中的作用. (1)负责监听zookeeper上所有的元数据变更请求: (2)负责topic的partition迁移任务分 ...

llqrcode.js识别二维码，解析二维码信息

llqrcode.js识别二维码，解析二维码信息相关推荐

最新文章

热门文章