qrcode生成二维码

发表于 更新于 分类于

前言

  js 生成二维码有两种方法：分别是用 qrcode.js 和 jquery.qrcode.js。

qrcode

  qrcode.js 是一个用于生成二维码图片的插件，主要是通过获取 DOM 的标签，再通过 HTML5 Canvas 绘制而成，不依赖任何库，支持中文内容。

使用方法

  1. 载入 js 文件
1
<script src="qrcode.js"></script>
  1. DOM 结构
1
<div id="code"></div>
  1. 调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 简单方式
new QRCode(document.getElementById('code'), 'https://www.baidu.com/');

// 设置参数方式
var qrcode = new QRCode('code', {
    text: 'hello world!',
    width: 200,
    height: 200,
    colorDark : '#000',
    colorLight : '#fff',
    correctLevel : QRCode.CorrectLevel.H
});

// 使用 API
qrcode.clear();
qrcode.makeCode('哈哈哈');

参数说明

  格式：new QRCode(element, option)

  1. element：显示二维码的元素或该元素的 id
  2. option：参数配置，有以下几个参数：
    （1）text：设置二维码的内容；
    （2）width：设置二维码宽度，默认值是 256；
    （3）height：设置二维码高度，默认值是 256；
    （4）colorDark：设置前景色，默认值是”#000”
    （5）colorLight：设置背景色，默认值是”#fff”
    （6）typeNumber: 设置计算模式，默认值是 4
    （7）correctLevel : 设置容错级别，默认值是 QRErrorCorrectLevel.H，可设置为 QRCode.CorrectLevel.L(容错率 7%)、QRCode.CorrectLevel.M(容错率 15%)、QRCode.CorrectLevel.Q(容错率 25%)、QRCode.CorrectLevel.H(容错率 30%)；
    注意：二维码容错率即是指二维码图标被遮挡多少后，仍可以被扫描出来的能力。容错率越高，则二维码图片能被遮挡的部分越多。容错率越高，越容易被快速扫描。因此推荐使用 QRErrorCorrectLevel.H。

API 接口

  1. makeCode(text)：设置二维码内容
  2. clear()：清除二维码（仅在不支持 Canvas 的浏览器下有效）

jquery.qrcode.js

  jquery.qrcode.js 是把 qrcode.js 用 jquery 方式封装起来的，用它来实现图形渲染，其实就是画图（支持 canvas 和 table 两种方式）默认是 canvas，canvas 方式还支持右键图片下载，不支持中文内容。

使用方法

  1. 载入 js 文件
1
<script src="jquery.qrcode.min.js"></script>
  1. DOM 结构
1
<div id="code"></div>
  1. 调用
1
2
3
4
5
6
7
8
9
10
11
12
13
// 简单方式
// $("#code").qrcode("hi,chen!");

// 直接生成二维码
$("#code").qrcode({
    render: "canvas", //渲染方式
    width: 200,  //宽度
    height: 200, //高度
    text: "https://www.baidu.com/", //内容
    background: "#fff",  //背景色
    foreground: "#000",   //前景色(二维码的颜色)
    correctLevel: 1,  //容错级别
});

参数说明

（1）render: 设置渲染方式，支持 canvas 和 table 两种方式，默认是 canvas；
（2）text：设置二维码的内容
（3）width：设置二维码宽度，默认值是 256；
（4）height：设置二维码高度，默认值是 256；
（5）foreground: 设置前景色，默认值是”#000”
（6）background: 设置背景色，默认值是”#fff”
（7）correctLevel : 设置容错级别
（8）typeNumber : 设置计算模式

生成二维码图片

  1. 载入 js 文件
1
<script src="jquery.qrcode.min.js"></script>
  1. DOM 结构
1
2
<div id="code"></div>
<img id="imgOne" src="">
  1. 调用
1
2
3
4
//生成二维码图片
var qrcode = $('#code').qrcode("https://www.baidu.com/").hide();
var canvas = qrcode.find('canvas').get(0);
$('#imgOne').attr('src',canvas.toDataURL('image/jpg'));

解决无法生成中文二维码的问题

  jquery-qrcode 这个库是采用 charCodeAt() 这个方式进行编码转换的，这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用 UTF-8, ISO-8859-1 等方式。英文是没有问题，如果是中文，一般情况下 Unicode 是 UTF-16 实现，长度 2 位，而 UTF-8 编码是 3 位，这样二维码的编解码就不匹配了。 所以可以在二维码编码前把字符串转换成 UTF-8，就可以解决这个问题了。
  相关代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$("#code").qrcode({
      render: "canvas", //渲染方式
      width: 200,  //宽度
      height: 200, //高度
      text: utf16to8("你好啊"), //内容
      background: "#fff",  //背景色
      foreground: "#000",   //前景色(二维码的颜色)
      correctLevel: 1,  //容错级别
	});

// 编码转换函数
  function utf16to8(str) {
      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));
      }
      }
      return out;
  }

参考网址