二维码生成插件（jquery.qrcode.js）说明文档

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库

View Code

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>

View Code

使用方法（qrcode.js）------重量级实现方式，对于简单应用来讲开发成本较高

载入 JavaScript 文件

1 <script src="jquery.qrcode.min.js "></script>     //二维码生成插件库

View Code

DOM结构

1 <div id="qrcode"></div>                        //生成二维码容器

View Code

调用

 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>

View Code

前方高能，避免入坑  (⊙o⊙)

 

• 使用的qrcode插件库不同，调用使用方法不同，在项目开发中一定要注意自己使用的是哪个，避免出现引用插件和调用方式不同造成的开发错误，比如无二维码生成、脚本报错（文档开始进行了详细的讲解和对比）
• 二维码包含的信息太长，导致二维码识别度太低扫不出来，建议文本二维码的文字数量不超过150字（低端手机也能扫描）
• 二维码编码前把字符串转换成UTF-8，避免参数存在中文时造成的不识别
• 容错率参数设置

 二维码容错率即是指二维码图标被遮挡多少后，仍可以被扫描出来的能力。容错率越高，则二维码图片能被遮挡的部分越多。

容错的原理是二维码在编码过程中进行了冗余，就像是123被编码成123123，这样只要扫描到一部分二维码图片，二维码内容还是可以被全部读到。

大多数情况下，我们强烈建议采用30%的容错率（对目前主流手机，在绝大多数扫描场景下，容错率越高，越容易被快速扫描!!!）

1.   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) 而识别，因此以黑白颜色配搭效果最好

二维码美化的颜色搭配，前景色和背景色过于相近也会导致二维码无法扫描，二维码的前景色必须比背景色更深

 

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库

View Code

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>

View Code

使用方法（qrcode.js）------重量级实现方式，对于简单应用来讲开发成本较高

载入 JavaScript 文件

1 <script src="jquery.qrcode.min.js "></script>     //二维码生成插件库

View Code

DOM结构

1 <div id="qrcode"></div>                        //生成二维码容器

View Code

调用

 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>

View Code

前方高能，避免入坑  (⊙o⊙)

 

• 使用的qrcode插件库不同，调用使用方法不同，在项目开发中一定要注意自己使用的是哪个，避免出现引用插件和调用方式不同造成的开发错误，比如无二维码生成、脚本报错（文档开始进行了详细的讲解和对比）
• 二维码包含的信息太长，导致二维码识别度太低扫不出来，建议文本二维码的文字数量不超过150字（低端手机也能扫描）
• 二维码编码前把字符串转换成UTF-8，避免参数存在中文时造成的不识别
• 容错率参数设置

 二维码容错率即是指二维码图标被遮挡多少后，仍可以被扫描出来的能力。容错率越高，则二维码图片能被遮挡的部分越多。

容错的原理是二维码在编码过程中进行了冗余，就像是123被编码成123123，这样只要扫描到一部分二维码图片，二维码内容还是可以被全部读到。

大多数情况下，我们强烈建议采用30%的容错率（对目前主流手机，在绝大多数扫描场景下，容错率越高，越容易被快速扫描!!!）

1.   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) 而识别，因此以黑白颜色配搭效果最好

二维码美化的颜色搭配，前景色和背景色过于相近也会导致二维码无法扫描，二维码的前景色必须比背景色更深