H5移动版识别二维码和条形码（PC和移动端都兼容）

一.需要引入JS文件

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><script type="text/javascript" src="js/DecoderWorker.js"></script><script type="text/javascript" src="js/exif.js"></script><script type="text/javascript" src="js/BarcodeReader.js"></script><script type="text/javascript" src="js/llqrcode.js"></script><script type="text/javascript" src="js/webqr.js"></script>

项目下载地址

二.Html文件

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="description" content="QR Code scanner"><meta name="keywords" content="qrcode,qr code,scanner,barcode,javascript"><meta name="language" content="English"><meta name="copyright" content="Lazar Laszlo (c) 2011"><meta name="Revisit-After" content="1 Days"><meta name="robots" content="index, follow"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<title></title>
<style type="text/css">
.imghelp{width: 100%;z-index:100;opacity: 0;
}
.selector{cursor:pointer;
}
.btn {width: 290px;border: 1px #000 solid;position: absolute;
}
ul{margin-bottom:0;margin-right:40px;
}
li{display:inline;padding-right: 0.5em;padding-left: 0.5em;font-weight: bold;border-right: 1px solid #333333;
}
li a{text-decoration: none;color: black;
}
.tsel{padding:0;
}
.hide {display: none;
}
.border {border:1px #000 solid;
}
</style>
</head><body><div id="main"><div id="header"><p id="mp1"></p></div><div id="mainbody" style="display: inline;"><table class="tsel" border="0" width="100%"><tbody><tr><td valign="top" align="center" width="50%"><table class="tsel" border="0"><tbody><tr><td><img class="selector hide" id="webcamimg" onClick="setwebcam()" align="left" style="opacity: 1;"></td><td><img class="selector hide" id="qrimg"  onClick="setimg()" align="right" style="opacity: 0.2;"></td></tr><tr><td colspan="2" align="center"><div id="outdiv"><div id="qrfile"><canvas id="out-canvas" class="border" width="290"></canvas><div class="imghelp"><div class="btn">点击选择二维码</div><input class="imghelp" type="file" onChange="handleFiles(this.files)"/></div></div></div></td></tr></tbody></table></td></tr><tr><td colspan="3" align="center"><img class="hide" ></td></tr><tr><td colspan="3" align="center"><div><span>扫描结果:</span><input type="text"  id="result"></div></td></tr></tbody></table></div></div><canvas id="qr-canvas"></canvas><!--条形码--><input type="file" style="display:none" id="barCode" capture="camera" 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: 300px;margin: 0 auto;"><img id="img" class="mt-12" width="300" height="180" style="display:block;text-align: center;" /><p class="codeInfo"></p><button type="button" onClick="$('#barCode').click()"  style="width: 300px;">点击识别条形码</button></div></div><script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><script type="text/javascript" src="js/DecoderWorker.js"></script><script type="text/javascript" src="js/exif.js"></script><script type="text/javascript" src="js/BarcodeReader.js"></script><script type="text/javascript" src="js/llqrcode.js"></script><script type="text/javascript" src="js/webqr.js"></script><script type="text/javascript">load();function login () {var hostSn = document.getElementById('result').value;};$(function() {compatibleInput();var timeStart = '';var timeEnd = '';BarcodeReader.Init();BarcodeReader.SetImageCallback(function(result) {console.dir(result);if(!result.length) {$(".codeInfo").html('条形码读取失败');return}var barcode = result[0];if(barcode.Value) {$(".codeInfo").html('扫描结果:' + barcode.Value);}timeStart1 = new Date()console.log(timeStart1)var date3 = timeStart1.getTime() - timeStart.getTime() //时间差的毫秒数});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();//判断是否是苹果手机，是则是truevar isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);if (isIos) {$("input:file").removeAttr("capture");};}</script>
</body>
</html>

注意事项：

webqr.js 手机端访问用户授权或者拒绝回调函数

H5移动版识别二维码和条形码相关推荐

opencv项目7---智能识别二维码和条形码
利用opencv和一个摄像头设备即可实现智能识别二维码和条形码,用到的都是基础的opencv知识. 二维码和条形码的照片可以去网上自行搜索. 这个项目可以有很多扩展: 1:比如做成一个公司的二维码证件 ...
ZXing 相册中识别二维码和条形码(直接引用就可以了)
*百度了很久一直没有找到关于相册获取条形码的Demo,真心是醉了,只能苦逼的去自己看闲话不说直接搞起分析: *核心 1,通过路径转换成bitmp对象 2,再bitmap对象转换成二进制图片(二值化 ...
python 通过摄像头识别二维码或条形码
话不多说直接上代码: from pyzbar.pyzbar import decode import cv2 import webbrowsercap = cv2.VideoCapture(0)whi ...
uniapp开发h5调摄像头识别二维码信息
因为html5+是要在app环境下运行,所以先创建一个5+项目我是觉得一个页面想要扫码识别后拿到数据不是很方便就创建了两个vue来进行测试,也可以在一个页面进行 index.vue <temp ...
iOS 自带二维码识别(识别二维码，条形码以及从相册中选择图片进行识别)
一:初始化 //扫描区域 UIImage *hbImage=[UIImage imageNamed:@"pick_bg"]; UIImageView * scanZomeBack= ...
Python_OpenCV通过摄像头识别二维码和条形码
参考: python3 + opencv +pyzbar 摄像头检测二维码并获取二维码内容/版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本 ...
微信小程序调用摄像头扫描识别二维码和条形码
今天在整一个有关于快递的小程序,快递单号一般比较长,手动录入会很麻烦. 然后就找了一下,其实微信小程序 API 中自带一个扫码识别的功能. wx.scanCode(Object object) 调起客 ...
长按识别图片变大，且可进行拖拽导致无法长按识别二维码
项目场景: 苹果系统在H5长按识别二维码问题描述: 长按识别图片变大,且可进行拖拽导致无法长按识别二维码. 同类问题:微信公众号二维码长按识别时,不是识别,而是放大解决方案: 加一个图片禁止拖拽脚 ...
Python识别二维码条形码？用pyzbar一招搞掂(含代码)
文章目录原创声明前言一.pyzbar 是什么? 二.安装 pyzbar 1. Windows 2. Ubuntu 3.centos7 三.开始识别代码走起: 结果: 可能出现的问题: 解决方法 ...

H5移动版识别二维码和条形码

H5移动版识别二维码和条形码（PC和移动端都兼容）

一.需要引入JS文件

二.Html文件

注意事项：

H5移动版识别二维码和条形码相关推荐

最新文章

热门文章