H5 识别条形码

最新推荐文章于 2024-04-19 16:48:56 发布

微齐天大圣.

最新推荐文章于 2024-04-19 16:48:56 发布

阅读量1k

点赞数 2

分类专栏： js 文章标签： H5 识别条形码 js 识别条形码 barcode 识别条形码识别条形码

原文链接：https://github.com/perfiffer/barcode_scan

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1. demo下载

链接: https://pan.baidu.com/s/1gqK3z3BxtYWp9U2-T3VWSg

提取码: 3mq2

2. 支持拍照识别和照片上传识别

3. 距离越近识别度越好

4. 代码示例

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">
<html>
<head lang=en>
<title>条形码扫描示例</title>
<meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
<meta name=viewport content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name=GENERATOR content="MShtml 8.00.6001.23588">
<script type="text/javascript" src="__STATIC__/common/barcode/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="__STATIC__/common/barcode/js/util.js"></script>
<script type="text/javascript" src="__STATIC__/common/barcode/js/quagga.min.js"></script>
<script type="text/javascript" src="__STATIC__/common/barcode/js/LocalResizeIMG.js"></script>
<script type="text/javascript" src="__STATIC__/common/barcode/js/patch/mobileBUGFix.mini.js"></script>
<script type="text/javascript">
    
    if(document.documentElement.clientWidth/7.5<=100){
        document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5 + 'px';
    }else{
        document.documentElement.style.fontSize = 100 + 'px';
    }
        
    $(document).ready(function(){
        
        //文件上传
        $.each($('input:file'), function(index, item){
            //文件压缩
            $(item).localResizeIMG({
                //width : 800,
                quality : 1,
                before : function(){
                    util.showMask();
                },
                success : function(result){
                    var imgData = result.clearBase64;
                    Quagga.decodeSingle({
                        //解码方式，与条形码的编码方式有关
                        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, // 尝试在图像中定位条形码
                        src: 'data:image/jpg;base64,' + imgData // 或 'data:image/jpg;base64,' + data
                    }, function(result){
                        if(result) {
                            console.log(result)
                            // alert(result)
                            if(result.codeResult) {
                                $("#result").val(result.codeResult.code);
                            } else {
                                $("#result").val("");
                                alert("识别失败，请重新扫码!");
                            }
                        }else{
                            alert("挂了!");
                            $("#result").val("");
                        }
                        util.removeMask(); 
                    });
                }
            });
        });
    });
                        
</script>
</head>
<body>
    <section>
        <div style="position: absolute; top: 0;">
            <form id="sform" method="post" name="sform" enctype="multipart/form-data">
                <p>
                    <span style="font-size: 14px;"><label id="scan_code">条码：</label></span>
                    <span><input class="infoInput"
                        id="result" style="width: 120px;" type="text" placeholder="" readonly="readonly" /></span>
                    <input type="button" class="upload-btn" value="扫码" onclick="$('#code').click();" />
                    <input id="code" class="pad10 b-f" style="display: none;" type="file" accept="image/*" />
                </p>
            </form>
        </div>
    </section>
</body>
</html>

微齐天大圣.

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
H5 识别条形码

1. demo下载链接: https://pan.baidu.com/s/1gqK3z3BxtYWp9U2-T3VWSg提取码: 3mq22. 支持拍照识别和照片上传识别3. 距离越近识别度越好4. 代码示例<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN"><html><head lang=en><title>条形码扫描示例</title>&
复制链接

扫一扫