基于BootStrap写个按钮,按钮绑定扫描二维码的事件
时间: 2024-01-08 13:14:48 浏览: 44
好的,可以参考以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扫描二维码</title>
<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<button id="scan-btn" class="btn btn-primary">扫描二维码</button>
</div>
</div>
</div>
<!-- 引入jQuery和Bootstrap的JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<!-- 引入Quagga库的JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
<script>
$(document).ready(function() {
// 绑定扫描二维码的事件
$('#scan-btn').click(function() {
// 设置了扫描的配置参数
let config = {
inputStream: {
type: "LiveStream",
constraints: {
width: {min: 640},
height: {min: 480},
facingMode: "environment"
}
},
locator: {
patchSize: "medium",
halfSample: true
},
numOfWorkers: navigator.hardwareConcurrency ?? 4,
decoder: {
readers: ["code_128_reader", "ean_reader", "ean_8_reader", "code_39_reader", "code_39_vin_reader", "codabar_reader", "upc_reader", "upc_e_reader", "i2of5_reader"]
},
locate: true
};
// 开始初始化Quagga库
Quagga.init(config, function(err) {
if (err) {
console.log(err);
return;
}
// 初始化成功后开始开始开始监听扫描事件
Quagga.start();
});
// 监听扫描到二维码的事件
Quagga.onDetected(function(result) {
console.log(result.codeResult.code);
// 扫描到二维码后停止扫描
Quagga.stop();
});
});
});
</script>
</body>
</html>
```
这段代码的实现涉及到了一个叫做 `Quagga` 的开源库,它可以通过 Web 端程序扫描二维码。具体来说,在代码中:
1. 引入了 Bootstrap 的 CSS 文件,以及 jQuery 和 Bootstrap 的 JS 文件和 `Quagga` 库的 JS 文件;
2. 设置一个带有 ID 的按钮,按钮的 click 事件绑定上扫描二维码的逻辑;
3. 在事件中初始化了 `Quagga` 库,设置了扫描的配置参数,并开始监听二维码扫描事件。
4. 扫描到二维码后,将二维码的值打印到控制台,并停止扫描。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)