用QRCode.js制作二维码解析器(qrcode.decode方法解析二维码)
由于近期公司要求制作一个移动端的‘长按识别二维码’的功能,但是该功能最本质的就是解析二维码,在网上找了很多,发现效果是有了,就是没有那种可以直接用的,后来在根据网上的资料,自己研究了一下,发现二维码解析部分的功能挺简单的,最主要就是利用了qrcode.js这个插件的qrcode.decode和qrcode.callback,就能对二维码进行解析,同时对解析结果进行返回。
注意:
qrcode.decode方法需要传入解析图片的路劲;
qrcode.callback返回的imgMsg就是解析图片后获取的信息!
1,引入二维码解析的js插件llqrcode.js
下载地址
2,解析的图片,这里采取的是上传图片解析(可以采用扫一扫输出的图片解析)
//获取图片路径
let getObjectURL = function(file){
let url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
3,获取解析图片
url = getObjectURL(elem.files[0]);
4,通过qrcode.decode()方法去解析改图片的内容
qrcode.decode(url);
5,通过qrcode.callback将解析的结果返回处理
qrcode.callback = function(imgMsg){
fn(imgMsg,url);
}
注意:此处的imgMsg就是解析的图片结果,在此处不论是(直接重定向window.location.href = imgMsg,还是elem.innerHTML = imgMsg。)
效果demo:
https://rattenking.github.io/demo/15/index.html
下载demo:
http://download.csdn.net/download/m0_38082783/9985096
http://www.jq22.com/jquery-info15973
效果图:
其他
[我的博客,欢迎交流!](http://rattenking.gitee.io/stone/index.html)
[我的CSDN博客,欢迎交流!](https://blog.csdn.net/m0_38082783)
[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)
[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)
[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)
[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)
[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)
[微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)
[前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)
[游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)