二维码又称QR Code,是一个近几年来移动设备上很流行的一种编码方式它比传统的一维码(条形码)能存更多的信息,也能表示更多的数据类型。按照一定规律排列组成的几何图形构成,它巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念
人们的生活方方面面都离不开二维码,而且她也给人们带来了极大的便利。
<br><br> (二维码自动识别)
二维码有哪些优缺点:
优点:
缺点:
下面进入正题,如何用js生成二维码,
QRCode.js
是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。可以快速的在web页面中绘制出二维码。
通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库
引入相应js文件 :
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>`
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
在html中设置页面容器。用来承载生成之后的二维码显示
调用:
$(网页容器).qrcode({宽度:值,高度:值,内容:值});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="jquery-1.8.3.js"></script>
<script src="jquery.qrcode.min.js"></script>
<title></title>
</head>
<script>
function demo(){
// $(网页容器).qrcode({宽度:值,高度:值,内容:值});
$("#code").qrcode({wihth:150,height:200,text:"HellowWord"});
}
</script>
<body>
<div id="code"></div>
<button onclick="demo()">点我生成</button>
</body>
</html>
注意:
但是有可能中文会出现乱码
编写方法转换中文内容,接收参数判断当前数据的Unicode
function utf16to8(str) {
var out, i, len, c;
out = ""; //创建空变量保存结果
len = str.length; //设置传入形参数据长度
for(i = 0; i < len; i++) {
c = str.charCodeAt(i); //返回字符串第一个字符的 Unicode 编码:
if ((c >= 0x0001) && (c <= 0x007F)) { //判断Unicode 编码范围
out += str.charAt(i);
} else if (c > 0x07FF) {
//将 Unicode 编码转为一个字符
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
//将 Unicode 编码转为一个字符
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
//返回出结果
return out;
}
最终在使用时调用当前方法进行中文转换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="jquery-1.8.3.js"></script>
<script src="jquery.qrcode.min.js"></script>
<script src="handler-chinese.js"></script>
<title></title>
</head>
<style>
#demodiv{
text-align: center;
}
#demodiv>input{
outline: none;
border: 1px red solid;
width: 300px;
height: 50px;
font-size: 30px;
padding-left: 10px;
}
</style>
<script>
function demo(){
//获取输入框结果
var text=$("#demodiv>input").val();
//调用装换方法
var newText=utf16to8(text)
//设置范围大小并且设置生成二维码内容
$("#code").qrcode({wihth:150,height:200,text:newText});
}
</script>
<body>
<div id="demodiv" >
<h1>QRCode生成二维码</h1>
<input type="text"/>
<!--调用转换方法-->
<button onclick="demo()">点我生成</button>
</div>
<div id="code"></div>
</body>
</html>
IE6〜10,Chrome,Firefox,Safari,Opera,Mobile Safari,Android,Windows Mobile,ETC。
QRCode.js 是用于制作 QRCode 的JavaScript库。QRCode.js 通过 HTML5 Canvas 和DOM中的表格标签支持跨浏览器。QRCode.js 没有依赖关系。通过 QECode.js 可以非常方便的在web 页面中使用二维码。让我们在应用中便捷的使用,扩展了项目的适用范围。让用户可以快捷的访问相关资源。提升项目的用户体验,使我们的应用更加符合当下用户的适用习惯,增加用户的黏性。
以上与大家分享的内容,如果需要学习教程、源码笔记的或者想学习交流,扫码加我拉你进群
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/183357.html原文链接:https://javaforall.cn