前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用QRCode.js制作二维码解析器(qrcode.decode方法解析二维码)

用QRCode.js制作二维码解析器(qrcode.decode方法解析二维码)

作者头像
Rattenking
发布2021-01-29 16:03:07
4.9K0
发布2021-01-29 16:03:07
举报
文章被收录于专栏:Rattenking

由于近期公司要求制作一个移动端的‘长按识别二维码’的功能,但是该功能最本质的就是解析二维码,在网上找了很多,发现效果是有了,就是没有那种可以直接用的,后来在根据网上的资料,自己研究了一下,发现二维码解析部分的功能挺简单的,最主要就是利用了qrcode.js这个插件的qrcode.decode和qrcode.callback,就能对二维码进行解析,同时对解析结果进行返回。

注意:

qrcode.decode方法需要传入解析图片的路劲;

qrcode.callback返回的imgMsg就是解析图片后获取的信息!

1,引入二维码解析的js插件llqrcode.js

下载地址

代码语言:javascript
复制
<script src="llqrcode.js" type="text/javascript" charset="utf-8"></script>

2,解析的图片,这里采取的是上传图片解析(可以采用扫一扫输出的图片解析)

代码语言:javascript
复制
//获取图片路径
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,获取解析图片

代码语言:javascript
复制
url = getObjectURL(elem.files[0]);

4,通过qrcode.decode()方法去解析改图片的内容

代码语言:javascript
复制
qrcode.decode(url);

5,通过qrcode.callback将解析的结果返回处理

代码语言:javascript
复制
qrcode.callback = function(imgMsg){
	fn(imgMsg,url);
}

注意:此处的imgMsg就是解析的图片结果,在此处不论是(直接重定向window.kk = 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

效果图:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/09/19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档