教你js生成二维码-QrCodeJS

教你js生成二维码-QrCodeJS

技术杂谈小彩虹2021-07-12 13:38:4490A+A-

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

img

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

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

img

二维码有哪些优缺点:

优点:

  • 1.高密度编码,信息容量大。
  • 2.编码范围广。
  • 3.容错能力强,具有纠错功能。
  • 4.译码可靠性高。
  • 5.可引入加密措施。
  • 6.成本低,易制作,持久耐用。

img

缺点:

  • 1.个人信息泄露 (火车票上都已经有了可以储存个人信息的二维码)
  • 2.识别二维码的设备还不够丰富。

QRCode.js

下面进入正题,如何用js生成二维码, QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。可以快速的在web页面中绘制出二维码。

通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库

img

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

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们