jquery二维码生成插件_二维码生成器
下载地址:jquery生成二维码.rar
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828
现在的互联网时代,二维码处处可见,这次我们研究下二维码生成插件qrious
二维码百科:
二维码又称二维条码,常见的二维码为QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型。
二维条码/二维码(2-dimensional bar code)是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的;在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图象输入设备或光电扫描设备自动识读以实现信息自动处理:它具有条码技术的一些共性:每种码制有其特定的字符集;每个字符占有一定的宽度;具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。
使用qrious:
1、引入
注:可进入BootCDN选择任意版本即可
<script src="https://cdn.bootcss.com/qrious/4.0.2/qrious.min.js"></script>
2、源码
<html> <head> <title>qrious二维码生成插件demo(www.chao99.top)</title> </head> <body> <img id="qrious"> <script src="https://cdn.bootcss.com/qrious/4.0.2/qrious.min.js"></script> <script> const qr = new QRious({ element: document.getElementById('qrious'), size: 266, level: 'H', value: 'http://www.chao99.top' }); </script> </body> </html>
3、效果
4、二维码优势:
1、信息容量大, 可以容纳多达1850个大写字母或2710个数字或500多个汉字
2、应用范围广, 支持文字,声音,图片,指纹等等…
3、容错能力强, 即使图片出现部分破损也能使用
4、成本低, 容易制作
5、易用5、二维码容错级别:
L级(低) 7%的码字可以被恢复
M级(中) 的码字的15%可以被恢复
Q级(四分)的码字的25%可以被恢复
H级(高) 的码字的30%可以被恢复6、qrious配置参数:
qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码,你可以控制二维码的尺寸颜色,还可以将生成的二维码进行Base64编码。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
background | string | “white” | 二维码的背景颜色 |
foreground | string | “black” | 二维码的前景颜色 |
level | string | “L” | 二维码的误差校正级别(L, M, Q, H)。 |
mime | string | “image/png” | 二维码输出为图片时的MIME类型。 |
size | number | 100 | 二维码的尺寸,单位像素。 |
文章到此结束,希望对你的学习有帮助!
jquery.qrcode是个依赖jquery的二维码生成插件,主要用于连接和文本的二维码生成,有两种生成格式canvas和table格式的,当然canvas不支持低版本浏览器,table有点小bug,但是没啥大问题。建议使用在移动端上。
这儿插件可以扩展开发,本来也是MIT协议的东西,后期我有可能会加点其他的功能,目前考虑的是加logo了,其他的再说。
这个js插件可以点击生成,列表生成都是可以的,写的方法跟JQ是一样的,不懂得可以留言。
【github地址:https://github.com/jeromeetienne/jquery-qrcode】代码可以去github下载,可以到文章的最下面使用百度网盘,我会提供的。
这次我就简单的给大家介绍一下jquery-qrcode的使用方法。(www.gendan5.com)
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<div class="qrcode1"></div>
<div class="qrcode2"></div>
<div class="qrcode3"></div>
<script type="text/javascript">
$(document).ready(function () {
//一、如果是英文字符
$('.qrcode1').qrcode({
render: "canvas", //两种模式1、table 2、canvas
correctLevel: 1,//识别度
quiet:20,
width: 200,//宽度
height: 200,//高度
foreground: "#333",//纹路色
background: "#eee",//背景色
text: "http://cenggel.com",//文字
});//二、链接带中文的时候需要使用encodeURI进行转码才可以 $('.qrcode2').qrcode({ render: "canvas", //两种模式1、table 2、canvas correctLevel: 1,//识别度 width: 200,//宽度 height: 200,//高度 foreground: "#333",//纹路色 background: "#eee",//背景色 text: (encodeURI("http://cenggel.com/tag/chrome插件"))//文字 }); //三、文字中包含中文+英文字符的时候 var str = "CGLweb前端 cenggel.com"; var out, i, len, c; out = ""; len = str.length; for(i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) { out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } //转换代码来自于网络,出处实在是不好说,如果知道出处请提供一下链接,谢谢 $('.qrcode3').qrcode({ render: "canvas", //两种模式1、table 2、canvas correctLevel: 3,//识别度 width: 200,//宽度 height: 200,//高度 foreground: "#333",//纹路色 background: "#eee",//背景色 text:out //文字 }); });
</script>
<style type="text/css">
body{ width:1200px; margin:0 auto;}
div{ margin:100px; width:200px; float:left;}
</style>
qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码,你可以控制二维码的尺寸颜色,还可以将生成的二维码进行Base64编码。
qrious.js二维码插件的可用配置参数如下:
下面的代码即可生成一张二维码:
<html>
<head>
<title>二维码入门小demo</title>
</head>
<body>
<img id="qrious">
<script src="qrious.min.js"></script>
<script>
var qr = new QRious({
element:document.getElementById('qrious'),
size:250, level:'H', value:'http://www.baidu.com'
});
</script>
</body>
</html>