Quagga.js库_quaggajs

作者：Monodyee | 2024-02-18 22:39:29

踩

quaggajs

Quagga.js

Quagga.js库主要用于扫描条形码，不多说废话，直接进入主题…

我们可以通过npm安装或者CDN的方式来使用Quagga。

本文章使用CDN的方式引入Quagga.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
</head>
<body>
    <!-- 摄像头展示区域 -->
    <div id="canvanCode"></div>
    <script>
        //Quagga库
        Quagga.init({
            inputStream : {
                name : "Live",
                type : "LiveStream",
                target: document.querySelector('#canvanCode')
            },
            decoder : {
                readers : ["ean_reader",'code_39_reader'],
                debug: {
                    drawBoundingBox: false,
                    showFrequency: false,
                    drawScanline: false,
                    showPattern: false,
                },
                multiple: false
            }
        }, ()=>{
            //打开摄像头
            Quagga.start();
            Quagga.onDetected(function(data){
                console.log(data.codeResult.code);
                //data.codeResult.code就是摄像头扫描出的商品条形码
                
				//Tip:只要摄像头一识别到条形码就会显示在控制台，有时候一识别就显示十几行条形码，所以我们可以使用节流，减少扫码的次数。
            });
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

遇到浏览器不显示摄像头的情况下，可以看看浏览器的摄像头是否允许开启。（小编的是谷歌浏览器）
在这里插入图片描述
Tip:扫描的条形码最好不要使用比较小，难看清的，最好是白底黑字的条形码，例如烟盒上的条形码。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】