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

一个纯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>

实现效果图