js生成二维码和解析二维码

这个整了好久，用的包换了好几次，所以记录一下

生成二维码

  <div class="container"><div class="row"><div class="col-md-6 mx-auto my-5"><form class="text-center"><div class="form-group"><label for="message">Enter message:</label><textarea class="form-control" id="message" name="message" rows="5" placeholder="Type your message here"></textarea></div><button type="button" class="btn btn-primary" onclick="generateQRCode()">Generate QR Code</button></form><div id="qrcode" class="mt-4"></div></div></div></div><script src="/js/qrcode.min.js"></script><script>function generateQRCode() {var message = document.getElementById("message").value;var qrcode = new QRCode(document.getElementById("qrcode"), {text: message,width: 256,height: 256,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H});}</script>

解析二维码

<div class="container"><div class="row"><div class="col-md-6 mx-auto my-5"><form class="text-center"><input type="file" id="uploadInput" accept="image/*"></form><div id="result"></div></form><div id="qrcode" class="mt-4"></div></div></div></div><script src="js/reqrcode.js"></script><script>const form = document.getElementById('uploadForm');const input = document.getElementById('uploadInput');input.onchange = function () {// files[0]是通过input file上传的二维码图片文件qrcode.decode(getObjectURL(this.files[0]));qrcode.callback = function (imgMsg) {//imgMsg 就是解析后的路径document.getElementById('result').innerText = decodeStr(imgMsg);}}//获取预览图片路径var getObjectURL = function (file) {let url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;}function decodeStr(str) {var out, i, len, c;var char2, char3;out = "";len = str.length;i = 0;while (i < len) {c = str.charCodeAt(i++);switch (c >> 4) {case 0:case 1:case 2:case 3:case 4:case 5:case 6:case 7:// 0xxxxxxxout += str.charAt(i - 1);break;case 12:case 13:// 110x xxxx 10xx xxxxchar2 = str.charCodeAt(i++);out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));break;case 14:// 1110 xxxx 10xx xxxx 10xx xxxxchar2 = str.charCodeAt(i++);char3 = str.charCodeAt(i++);out += String.fromCharCode(((c & 0x0F) << 12) |((char2 & 0x3F) << 6) |((char3 & 0x3F) << 0));break;}}return out;}</script>

然后是两个引入的js
reqrcode和qrcode

js生成二维码和解析二维码相关推荐

Java利用Zxing生成二维码及解析二维码内容
前言 Java 操作二维码的开源项目很多,如 SwetakeQRCode.BarCode4j.Zxing 等等本篇文章是介绍利用Zxing来生成二维码图片在web网页上展示,同时解析二维码图片. Z ...
llqrcode.js识别二维码，解析二维码信息
llqrcode.js具有扫描二维码功能,用来进行从图片中识别二维码,可解析二维码的信息. 直接上代码 <!DOCTYPE html> <html> <head>& ...
利用ZXing工具生成二维码以及解析二维码
今天突然想到二维码是如何存储信息的.于是就开始各种搜索,最终自己也利用Google的ZXing工具完成了一个生成二维码和解析二维码的简单程序. 一. 二维码生成原理(即工作原理) 二维码官方叫版本Ve ...
java生成二维码/java解析二维码
二维码的优缺点优点:1. 高密度编码,信息容量大:2.编码范围广:3.容错能力强:4.译码可靠性高:5.可引入加密措施:6.成本低,易制作,持久耐用. 缺点:1.二维码技术成为手机病毒.钓鱼网站传播 ...
QRCode生成二维码和解析二维码
使用QRCode生成和解析二维码,这个和前面的不一样,只要盗图两个jar(后面上传),即可生成二维码直接上代码,注释都有 Qrcode qrcode=new Qrcode();qrcode.setQ ...
java 生成二维码，解析二维码
今天遇到需求,使用Java生成二维码图片,网搜之后,大神们早就做过,个人总结一下. 目标:借助Google提供的ZXing Core工具包,使用Java语言实现二维码的生成和解析. 步骤如下: 1.m ...
xing生成二维码与解析二维码
//用xing方式生成二维码public void XingGet(){int width=300;int height=300;String format="png";Strin ...
【zxing生成二维码及解析二维码】
导入依赖 <dependency><gr ...
zxing使用byte数组生成二维码和解析二维码
二维码的生成方法网上一搜一大堆,但基本都是直接以字符串进行生成,存储访问路径或一些简单的信息.然而有时就是有这么特殊的需求,需要使用二维码传输数据,数据量还比较大.数据量太大二维码不好生成和扫描,就想 ...

js生成二维码和解析二维码

生成二维码

解析二维码

js生成二维码和解析二维码相关推荐

最新文章

热门文章