H5使用qrcode实现扫码

时间:2025-03-15 09:00:04

Qrode

可用于识别二维码,生成二维码。
下载地址
本文源码

Qrode 基本使用

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

  1. 解析二维码
(imgSrc);
 = function(imgMsg){
    ("imgMsg",imgMsg);
}

Html使用

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

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

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

   $('#inputFile').on('change',function(){
		let inputFile =   $(this)
		('inputFile:', inputFile)
		// ('inputFile:', getObjectURL(inputFile[0]))
		let reader = new FileReader();                
		(inputFile[0].files[0]);
		 = function (e) {
			let urlData = ;
			// ('reader:', urlData)
			(urlData);
			 = function(imgMsg){
				("imgMsg",imgMsg);
			}
		}
		
	 })

参考