<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>画像 QR コード認識</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 = 新しい FileReader();
fr.readAsDataURL(ファイル);
fr.onloadend = function(e) {
varbase64Data = e.target.result;
Base64ToqR(base64Data)
}
}
})
function Base64ToqR(data) {
var c = document.getElementById("qrcanvas");
var ctx = c.getContext("2d");
var img = 新しい画像();
img.src = データ;
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.
const code = jsQR(imageData.data, imageData.width, imageData.
inversionAttempts: "dontInvert",
});
if(code){
showCode(code.data)
}else{
alert("识别错误")
}
};
}
関数 showCode(code){
$("#result").append("<li>"+code+"</li>")
}
</script>
</html>
ネイティブ js\h5 は QR コードを認識します
おすすめ
転載: blog.csdn.net/qq_43314341/article/details/128202247
おすすめ
ランキング