H5使用qrcode实现扫码

Qrode

qrcode.js 可用于识别二维码，生成二维码。
下载地址
本文源码

Qrode 基本使用

1. 生成二维码

<div id="qrcode"></div>
<script type="text/JavaScript">
new QRCode(document.getElementById("qrcode"), "这是一个二维码");  // 设置要生成二维码的链接
</script>

2. 解析二维码

qrcode.decode(imgSrc);
qrcode.callback = function(imgMsg){
    console.log("imgMsg",imgMsg);
}

Html使用

由 qrcode.decode(imgSrc) 可知 参数imgSrc是图片的路径。可使用input 取得图片的路径

   <div> 选择文件 <input  type="file" id="inputFile" /> </div>

监听input 的change 事件，使得选取图片之后，在执行识别二维码。事件中还可判断文件是否是图片类型文件。
简单代码（未判断是否是图片类型文件）

   $('#inputFile').on('change',function(){
		let inputFile =   $(this)
		console.log('inputFile:', inputFile)
		// console.log('inputFile:', getObjectURL(inputFile[0]))
		let reader = new FileReader();                
		reader.readAsDataURL(inputFile[0].files[0]);
		reader.onload = function (e) {
			let urlData = this.result;
			// console.log('reader:', urlData)
			qrcode.decode(urlData);
			qrcode.callback = function(imgMsg){
				console.log("imgMsg",imgMsg);
			}
		}
		
	 })

参考