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>