教你js生成二维码-QrCodeJS

二维码又称QR Code，是一个近几年来移动设备上很流行的一种编码方式它比传统的一维码（条形码）能存更多的信息，也能表示更多的数据类型。按照一定规律排列组成的几何图形构成，它巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念

生活中的应用也是非常的广泛

人们的生活方方面面都离不开二维码，而且她也给人们带来了极大的便利。

二维码有哪些优缺点：

优点：

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 页面中使用二维码。让我们在应用中便捷的使用，扩展了项目的适用范围。让用户可以快捷的访问相关资源。提升项目的用户体验，使我们的应用更加符合当下用户的适用习惯，增加用户的粘性。