在做需求的时候，大家可以会遇到一些问题，如何生成二维码，以及如何识别二维码等问题；
如何生成二维码点击此处传送到我之前的文章------------->请点击传送门------->入如何生成二维码
识别二维码有分几种情况：
第一种，我们比较常见的微信...之类的扫码登陆；
第二种，我们比较少见，那就是一些做资产管理，贴资产信息的二维码在设备上了，扫码识别二维码信息了；
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>
大家多多关注、点赞、收藏，后续高频持续更新，总有一些是你需要的，实战项目的分享，谢谢大家
