web端(Javascript-Barcode-Reader)实现上传图片或拍照识别条形码的功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>识别条形码</title>
    </head>
    <body>
        <input type="file" style="display:none" id="barCode" accept="image/*" mutiple="mutiple" capture="camera" />
        <div class="m-12" style="width: 100%;display: flex;justify-content: center;align-content: center;flex-direction: column;">
            <div style="width: 140px;margin: 0 auto;">
                <button type="button" οnclick="$('#barCode').click()"  style="width: 140px;">点击拍照上传图片</button>
                <!--border-radius: 50%;-->
                <img id="img" class="mt-12" width="500PX" height="500PX" style="display:block;text-align: center;" />
                <p class="codeInfo mt-12" style="color: red;font-size: 16px;text-align: center;"></p>
                <p class="time mt-24 fs-18 text-center"></p>
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/DecoderWorker.js"></script>
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/exif.js"></script>
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/BarcodeReader.js"></script>
<script>
    $(function() {
        compatibleInput();
        var timeStart = '';
        var timeEnd = '';
        BarcodeReader.Init();
        BarcodeReader.SetImageCallback(function(result) {
            console.dir("1.==="+JSON.stringify(result));
            if(!result.length) {
                $(".codeInfo").html('条形码读取失败');
                return
            }
            var barcode = result[0];
            if(barcode.Value) {
                $(".codeInfo").html('条形码信息是:' + barcode.Value);
            }
            timeStart1 = new Date()
//            console.log("2.timeStart1=="+timeStart1)
            var date3 = timeStart1.getTime() - timeStart.getTime() //时间差的毫秒数
            $(".time").html('共用时:' + date3 + '毫秒')
        });
        document.querySelector("#barCode").addEventListener('change', function(evt) {
            timeStart = new Date()
//            console.log("时间=="+timeStart)
            var file = evt.target.files[0];
            reader = new FileReader();
            console.log("读取图片=="+reader)
            reader.onloadend = function() {
                var img = new Image();
                img.src = reader.result;
                console.log("读取图片完成==="+img)
                BarcodeReader.DecodeImage(img);
            }
            console.log("文件==="+file)
            //            $('#img').attr('src', window.createObjectURLcre(file))   ;   
            reader.readAsDataURL(file);
            img.src = URL.createObjectURL(file)
 
        }, false);
    });
    // 判断当前是否属于ios移动端,兼容input同时调用手机相册和相机
 
function compatibleInput(){
  //获取浏览器的userAgent,并转化为小写
  var ua = navigator.userAgent.toLowerCase();
  //判断是否是苹果手机,是则是true
  var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
  if (isIos) {
    $("input:file").removeAttr("capture");
  };
}
</script>

        
    </body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值