<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Scanner</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/jsqr"></script>
</head>
<body>
<h1>QR Code Scanner</h1>
<input type="file" id="fileInput" accept="image/*">
<h2>Result:</h2>
<div id="result"></div>
<script>
$(document).ready(function() {
$("#fileInput").change(function() {
if (this.files && this.files[0]) {
var fileReader = new FileReader();
fileReader.onload = function(e) {
$('#result').text('Scanning...');
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0, canvas.width, canvas.height);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var result = jsQR(imageData.data, imageData.width, imageData.height);
if (result) {
$('#result').text(result.data);
} else {
$('#result').text('QR code not found');
}
};
};
fileReader.readAsDataURL(this.files[0]);
}
});
});
</script>
</body>
</html>
原生JS实现识别二维码功能
猜你喜欢
转载自blog.csdn.net/qq_43314341/article/details/130598950
今日推荐
周排行