前端js解析识别图片二维码 

<!--
 * author:wenqd
 * email:309820722@qq.com
 * date:2019-09-18 09:34
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片二维码识别</title>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
	</head>
	<body>
		<span lan_id="bc">选择图片</span> <input type="file"  id="pictureChange"/>
		<div>
			<h2>识别结果：</h2>
			<ul id="result">
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		$("body").append('<canvas id="qrcanvas" style="display:none;"></canvas>')
		$("#pictureChange").change(function (e) {
			var file = e.target.files[0];
			if(window.FileReader) {
				var fr = new FileReader();
				fr.readAsDataURL(file);
				fr.onloadend = function(e) {
					var base64Data = e.target.result;
					base64ToqR(base64Data)
				}
			}
		})
		function base64ToqR(data) {
			var c = document.getElementById("qrcanvas");
			var ctx = c.getContext("2d");
	
			var img = new Image();
			img.src = data;
			img.onload = function() {
				$("#qrcanvas").attr("width",img.width)
				$("#qrcanvas").attr("height",img.height)
				ctx.drawImage(img, 0, 0, img.width, img.height);
				var imageData = ctx.getImageData(0, 0, img.width, img.height);
				const code = jsQR(imageData.data, imageData.width, imageData.height, {
					inversionAttempts: "dontInvert",
				});
				if(code){
					showCode(code.data)
				}else{
					alert("识别错误")
				}
			};
		}
		function showCode(code){
			$("#result").append("<li>"+code+"</li>")
		}
	</script>
</html>

　　

     

    posted @ 2019-09-18 12:01  Victor——  阅读(11438)  评论(12)  编辑  收藏  举报