使用 html5-qrcode 扫码
html5-qrcode 是一个 JavaScript 库，可以使用浏览器的相机来扫描二维码（QR 码）。以下是使用 html5-qrcode 扫码的基本步骤和示例代码：
- 确保你的页面包含了 jQuery 库和 html5-qrcode 库。
- 创建一个 HTML 元素来显示扫码结果。
- 使用 html5QrCode 函数来启动扫码过程。
HTML 示例：
<!DOCTYPE html>
<html>
<head>
<title>QR Code Scanner</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.0.3/html5-qrcode.min.js"></script>
</head>
<body>
<div id="qr-reader-results"></div>
<button id="start-scan">Start Scan</button>
<script>
$('#start-scan').click(function() {
html5QrCode.decodeFromInput({
// 'result' is the captured result, which can be a string (QR code content) or raw data.
// 'cancelled' is a boolean indicating if user cancelled the scan (if supported).
onDecodeError: function(error) {
console.log('Error', error);
},
onDecodeSuccess: function(decodedString) {
console.log('Decoded', decodedString);
$('#qr-reader-results').text(decodedString);
},
// Optional, see documentation for all options: https://github.com/mebjas/html5-qrcode#configuration
})
.catch(function(error) {
console.error('Error', error);
});
});
</script>
</body>
</html>这段代码会创建一个按钮，用户点击后会启动相机扫描。扫描结果会显示在页面上的 div 元素中，并在控制台打印出来。如果用户取消扫描或者出现解码错误，会有相应的处理函数来处理这些情况。
评论已关闭