使用qrcode.js实现手机拍照识别二维码 – NA博客

使用qrcode.js实现手机拍照识别二维码

最近做了一个小需求,要求是可以使用手机拍照识别二维码,然后再处理对应的业务逻辑。拿到需求之后就想到了qrcode.js可以实现生成和识别,然后就写了一个demo出来,本文就是demo版本,非需求最终实现版本,因为最终版涉及到一些无法透露的业务逻辑,所以请见谅。

html代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="language" content="English">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<title>识别二维码</title>
<script type="text/javascript" src="./qr/llqrcode.js"></script>
</head>

<body>

<input type="text" id="scanResult">
<input type="file" id="fileBtn" capture="camera" onchange="handleFiles(this.files)" accept="image/*">

<script type="text/javascript">
function handleFiles(f)
{
    var reader = new FileReader();
    reader.onload = (function(e) {
		return function(e) {
			qrcode.decode(e.target.result);
		};
    })(f[0]);
    qrcode.callback = function(a){document.getElementById("scanResult").value=a;};
    reader.readAsDataURL(f[0]);
}
</script>
</body>
</html>

实现逻辑:

首先点击input选择文件按钮,然后选取二维码图片(手机访问点击会直接打开摄像头拍照),获取到图片后使用 qrcode.js 进行二维码解码,拿到内容后处理对应的业务逻辑即可。

demo下载:

最终效果:

清风

心中有梦想就要一如既往,不能遇到困难说放弃就放弃,千锤百炼才能磨炼出好钢,饱经风霜才能更强。

相关推荐

发表评论

您的电子邮箱地址不会被公开。



微信扫一扫,分享到朋友圈

使用qrcode.js实现手机拍照识别二维码
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close