jsQR.js - 摄像头或图片中扫描二维码并识别插件

jsQR.js - 摄像头或图片中扫描二维码并识别插件

2020-09-3

151

GitHub

一个纯JavaScript的QR插件。可以实现在摄像头中扫描二维码,图像中识别二维码。

网站如果需要调用摄像头需要HTTPS支持,本地测试不需要。


简单的应用:识别图片中的二维码

HTML代码

<script src="jsQR.js"></script>
<canvas id="canvas" width="500" height="500"></canvas>

JS代码

var canvasElement = document.getElementById('canvas');
var canvas = canvasElement.getContext('2d');
window.onload = function(){
	var img = new Image();
	img.src = "qr1.jpg";
	img.onload = function(){
		// 将图片画到canvas上面上去!
		canvas.drawImage(img,10,10, 500, 500); //缩放 
		var imgdata = canvas.getImageData(10, 10, 500, 500); //复制画布上指定矩形的像素数据
		code =  jsQR(imgdata.data, 500, 500);
		if (code) {//如果能够解码QR则有返回值 
			console.log(code); 
			console.log('识别结果:' + code.data); 
		}
	}
}

实现摄像头中扫码二维码

HTML代码

<h2>视频</h2>
<video  id="video" autoplay style="width: 400px;height: 320px"></video>
<h2>画布</h2>
<canvas id="canvas" hidden width="400" height="400"></canvas>
<div id="output" hidden>
    <div id="outputMessage">未检测到二维码.</div>
    <div hidden><b>识别结果⌛:</b> <span id="outputData"></span></div>
 </div>
<script src="jsQR.js"></script>

实现效果图


1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。