jquery.qrcode.js 是一个纯浏览器用于生成二维码图片的插件,生成的 QRcode 无需下载图片,并且不依赖第三方服务,下面插件使用的是压缩版本,大小不超过4K
qrcode.js 是实现二维码数据计算的核心类,
jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)默认是canvas,canvas方式还支持右键图片下载
使用方法(jquery.qrcode.min.js)-----轻量级实现方式,减少图片IO,节省流量
载入 JavaScript 文件
1 <script src="jquery.qrcode.min.js "></script> //二维码生成插件库 2 <script src="jquery.js "></script> //jquery库
DOM结构
<div id="qrcode"></div> //生成二维码容器
调用
1 <script> 2 //jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式。 3 //英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。 4 //解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下: 5 function utf16to8(str) { 6 var out, i, len, c; 7 out = ""; 8 len = str.length; 9 for (i = 0; i < len; i++) { 10 c = str.charCodeAt(i); 11 if ((c >= 0x0001) && (c <= 0x007F)) { 12 out += str.charAt(i); 13 } else if (c > 0x07FF) { 14 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); 15 out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); 16 out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); 17 } else { 18 out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); 19 out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); 20 } 21 } 22 return out; 23 } 24 25 jQuery(‘#qrcode‘).qrcode({ 26 render: "canvas",//设置渲染方式(有两种方式 table和canvas,默认是canvas) 27 text: utf16to8("gyc://gyyx.cn/108319270eb7fecb321654c0?s=测试文字"), 28 width: 161, 29 height: 161, 30 background: "#ffffff",//背景颜色 31 foreground: "#000000", //前景颜色 32 correctLevel :0,//纠错等级 33 }); 34 </script>
使用方法(qrcode.js)------重量级实现方式,对于简单应用来讲开发成本较高
载入 JavaScript 文件
1 <script src="jquery.qrcode.min.js "></script> //二维码生成插件库
DOM结构
1 <div id="qrcode"></div> //生成二维码容器
调用
1 <script> 2 // 简单方式 3 new QRCode ( document.getElementById ( ‘qrcode‘ ) , ‘your content‘ ); 4 // 设置参数方式 5 var qrcode = new QRCode ( ‘qrcode‘, { 6 text: ‘your content‘, 7 width: 256, 8 height: 256, 9 colorDark : ‘#000000‘ , //前景色 10 colorLight : ‘ #ffffff ‘ , //背景色 11 correctLevel : QRCode.CorrectLevel.H //纠错等级 12 }); 13 // 使用 API 14 qrcode.clear(); //清除二维码。(仅在不支持 Canvas 的浏览器下有效) 15 qrcode.makeCode(‘new content‘); //设置二维码内容,生成二维码 16 </script>
前方高能,避免入坑 (⊙o⊙)
- 使用的qrcode插件库不同,调用使用方法不同,在项目开发中一定要注意自己使用的是哪个,避免出现引用插件和调用方式不同造成的开发错误,比如无二维码生成、脚本报错(文档开始进行了详细的讲解和对比)
- 二维码包含的信息太长,导致二维码识别度太低扫不出来,建议文本二维码的文字数量不超过150字(低端手机也能扫描)
- 二维码编码前把字符串转换成UTF-8,避免参数存在中文时造成的不识别
- 容错率参数设置
二维码容错率即是指二维码图标被遮挡多少后,仍可以被扫描出来的能力。容错率越高,则二维码图片能被遮挡的部分越多。
容错的原理是二维码在编码过程中进行了冗余,就像是123被编码成123123,这样只要扫描到一部分二维码图片,二维码内容还是可以被全部读到。
大多数情况下,我们强烈建议采用30%的容错率(对目前主流手机,在绝大多数扫描场景下,容错率越高,越容易被快速扫描!!!)
- qrcode.js
correctLevel : QRErrorCorrectLevel.L, (7%)
correctLevel : QRErrorCorrectLevel.M, (15%)
correctLevel : QRErrorCorrectLevel.Q, (25%)
correctLevel : QRErrorCorrectLevel.H, (30%)
2. jquery.qrcode.min.js
correctLevel :1,
correctLevel :0,
correctLevel :3,
correctLevel :2,
- 二维码美化之颜色搭配(避免背景色和底图融合,导致扫描不出来二维码)
二维码扫描器是根据条码的颜色反差 (Color Contrast) 而识别,因此以黑白颜色配搭效果最好
二维码美化的颜色搭配,前景色和背景色过于相近也会导致二维码无法扫描,二维码的前景色必须比背景色更深