在做需求的时候,大家可以会遇到一些问题,如何生成二维码,以及如何识别二维码等问题;
如何生成二维码点击此处传送到我之前的文章------------->请点击传送门------->入如何生成二维码
识别二维码有分几种情况:
第一种,我们比较常见的微信...之类的扫码登陆;
第二种,我们比较少见,那就是一些做资产管理,贴资产信息的二维码在设备上了,扫码识别二维码信息了;
1.引入js库,分别引入了两个js,一个是jquery,一个是jsQR(解析二维码)
<script src=" /jquery/3.4.1/jquery.min.js "></script><script src=" https://cozmo.github.io/jsQR/jsQR.js "></script>
2.源码demo,大家直接复制到本地直接看
<!DOCTYPE html><html><head><meta-charset="utf-8" /><title>二维码识别</title><script src=" /jquery/3.4.1/jquery.min.js "></script><script src=" https://cozmo.github.io/jsQR/jsQR.js "></script></head><body><span id="selectImage">选择图片</span><input type="file" id="pull_image" /><div><h2>识别结果:</h2><ul id="result"></ul></div></body><script type="text/javascript">debugger;//用js创建一个chanvas元素$("body").append('<canvas id= "qrcanvas" style= "display:none;"></canvas>')//当input框发生变化时,执行下面的代码$("#pull_image").change(function (e) {// debugger//获取这个文件element里面的属性var file = e.target.files[0];//判断源文件window.FileReader这个属性是否存在,存在就继续继续,不存在就不执行if (window.FileReader) {var newFile = new FileReader();newFile.readAsDataURL(file);newFile.onload = function (e) {//获取文件对应的basevar base64Data = e.target.result;//通过函数函数传参,把原文件base64信息传到下面的函数中base64Qr(base64Data)}}})//此处的data其实就是上面 base64Qr(base64Data) 函数传参的数据function base64Qr(data) {var canvas = document.getElementById('qrcanvas');var ctx = canvas.getContext("2d");var img = new Image();img.src = data;img.onload = function () {$("#qrcanvas").attr('width', img.width)$("#qrcanvas").attr('height', img.height)ctx.drawImage(img, 0, 0, img.width, img.height);//获取源文件具体的数据var imageData = ctx.getImageData(0, 0, img.width, img.height);//解析出源文件具体携带的信息const code = jsQR(imageData.data, imageData.width, imageData.height, {inversionAttempts: "dontinvert"});//code存在,说明携带信息,就执行下面的代码if (code) {showCode(code.data)} else {alert("识别错误")}};}function showCode(code) {$("#result").append("<li>" + code + "<li>")console.log('触发code数据详情')}</script></html>
大家多多关注、点赞、收藏,后续高频持续更新,总有一些是你需要的,实战项目的分享,谢谢大家