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>
今天的文章H5 识别条形码分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/24822.html
