【JavaScript】JS生成二维码-qrcode.js
千锋前端学习营发表于：2024-10-29 14:21:59浏览：132次
二维码又称QR Code，是一个近几年来移动设备上很流行的一种编码方式它比传统的一维码（条形码）能存更多的信息，也能表示更多的数据类型。按照一定规律排列组成的几何图形构成，它巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念
生活中的应用也是非常的广泛
人们的生活方方面面都离不开二维码，而且她也给人们带来了极大的便利。
<br><br> (二维码自动识别)
二维码有哪些优缺点：
优点：
- 1．高密度编码，信息容量大。
- 2．编码范围广。
- 3．容错能力强，具有纠错功能。
- 4．译码可靠性高。
- 5．可引入加密措施。
- 6．成本低，易制作，持久耐用。
缺点：
- 1．个人信息泄露 （火车票上都已经有了可以储存个人信息的二维码）
- 2．识别二维码的设备还不够丰富。
QRCode.js
下面进入正题，如何用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 页面中使用二维码。让我们在应用中便捷的使用，扩展了项目的适用范围。让用户可以快捷的访问相关资源。提升项目的用户体验，使我们的应用更加符合当下用户的适用习惯，增加用户的黏性。
猜你喜欢
- 【JavaScript】JS四舍五入保留两位小数(二)
- 在Web前端开发中，大多数的项目都是需要表单支持的，而在表单中有一种比较常见的功能是要你四舍五入保留两位小数，接下来将为大家详细的介绍一下保留两位小数的六种常用方法。1. toFixed()方法 介绍：这是JS自带的一个方法，可以四舍五入保留指定位数的小数，并且位数不够时可以自动补0 注意：保留两位小数，将数值类型的数据改变
- 【JavaScript】JS四舍五入保留两位小数(一)
- 1 、tofixed方法toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。但是其四舍五入的规则与数学中的规则不同，使用的是银行家舍入规则。**银行家舍入：所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。**具体规则如下：简单来说就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。如下：> (3.61).toFixed(1) //四舍 '3.6&#3
- 【JavaScript】JS中referer的使用
- HTTP请求中有一个referer的报文头，用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页，那么就referrer就是www.sina.com.cn/sports/了。在Javascript中，我们可以通过document.referrer来获取同样的信息。通过这个信息，我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说，是非常重要的，这可以告诉我们不同渠道带来的流量的分布情况，还有用户搜索
- 【JavaScript】JS复制剪切神器clipboard.js基本使用
- clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
- 【JavaScript】JS防抖动方法
- 防抖动是指在事件被触发时，为了减少因为快速连续操作导致的大量事件触发，通常会设置一个延时，当事件被触发后，等待一段时间，如果在这段时间内没有新的相同事件被触发，则执行该事件的操作。在JavaScript中，防抖动通常可以通过设置定时器来实现。当事件触发时，如果已经有一个定时器在等待，则清除它并重新设置一个新的定时器。只有当定时器到期而事件也没有被触发时，事件绑定的处理函数才会执行。function debounce(fn, wait) { l
- 【JavaScript】JS获取时间戳秒值
- 方法一：使用JavaScript的Date对象的getTime()方法来获取当前时间的毫秒值，然后将其除以1000得到秒值。var timestamp = Math.floor(new Date().getTime() / 1000);方法二：使用JavaScript的Date对象的getTime()方法获取当前的毫秒值，然后使用Math.floor()函数向下取整得到秒值。var timestamp =
- 【JavaScript】5个最受欢迎的图像处理JS库
- 图像处理库 (IML) 用于对图像执行各种处理功能：你可以增加图像的亮度、添加饱和度或滤镜、裁剪和调整大小，以及更多有价值的功能，这些功能将帮助你完成几乎所有事情并将你的网络浏览器变成 Adobe Lightroom！ 我们为每项重要的图像处理任务都提供了库，从简单的低级操作（例如滤镜、亮度和饱和度）到用于裁剪或图像合成的单一用途库。
栏目分类全部>