方式一. 只识别二维码
实现方式一 jsQR
个人预览页面网址只扫码二维码
GitHub jsQR
inde.html
<!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" accept="image/*" multiple 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>
实现方式二 jsqrcode
个人预览页面网址只扫码二维码2
原页面网址webqr.com
GitHub jsqrcode
index.html
<!-- saved from url=(0028)https://webqr.com/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="QR Code scanner">
<meta name="keywords" content="qrcode,qr code,scanner,barcode,javascript">
<meta name="language" content="English">
<meta name="copyright" content="Lazar Laszlo (c) 2011">
<meta name="Revisit-After" content="1 Days">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web QR</title>
<style type="text/css">
body{
width:100%;
text-align:center;
}
img{
border:0;
}
#main{
margin: 15px auto;
background:white;
ove