<html>
<head>
<meta charset="utf-8" />
<title>jsQR库识别二维码</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>
<canvas id="qrcanvas" style="display:none;"></canvas>
<span lan_id="bc">选择二维码</span> <input type="file" id="codeChange"/>
<div>
<h2>识别结果：</h2>
<ul id="result">
</ul>
</div>
</body>
<script type="text/javascript">
$("#codeChange").change(function () {
var $this = $(this);
var file = $this[0].files[0];
//置空连续上传
//$this.val('');
var fr = new FileReader();
fr.readAsDataURL(file);
fr.onloadend = function(e) {
var base64Data = e.target.result;
base64ToQR(base64Data)
}
});
function base64ToQR(data) {
var qrcanvas = $("#qrcanvas");
var ctx = qrcanvas.get(0).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){
alert("识别二维码错误")
}
showCode(code.data)
};
}
function showCode(code){
$("#result").append("<li>"+code+"</li>")
}
</script>
</html>
