Quagga.js库

最新推荐文章于 2024-03-16 09:40:23 发布

I'm Mr.C

最新推荐文章于 2024-03-16 09:40:23 发布

阅读量5k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_44849271/article/details/112299719

版权

JavaScript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

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>

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

I'm Mr.C

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
Quagga.js库

Quagga.jsQuagga.js库主要用于扫描条形码，不多说废话，直接进入主题…我们可以通过npm安装或者CDN的方式来使用Quagga。本文章使用CDN的方式引入Quagga.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <script src="https://cd
复制链接

扫一扫