二维码js生成库

• 1. 二维码js生成库
  • 1.1. jr-qrcode
    • 1.1.1. 兼容性
    • 1.1.2. 安装
    • 1.1.3. 插件引用
      • 1.1.3.1. 传统引用
      • 1.1.3.2. 模块化引用(比如：webpack)
    • 1.1.4. 用法
    • 1.1.5. 二维码容错级别
    • 1.1.6. 示例
    • 1.1.7. 效果图

1.1. jr-qrcode

把字符串生成二维码，并以Base64 URL形式输出。 支持白色二维码，即反色二维码。

---

1.1.1. 兼容性

插件使用了H5的canvas特性进行二维码绘制，最后输出base64 url，因此本插件要求运行环境支持canvas特性即可。

1.1.2. 安装

npm install jr-qrcode

---

1.1.3. 插件引用

1.1.3.1. 传统引用

<script type="text/javascript" src="dist/jr-qrcode.js"></script>
<script>
  var imgBase64 = jrQrcode.getQrBase64('hello world');
</script>

1.1.3.2. 模块化引用(比如：webpack)

// 方法1：全局引用（window.jrQrcode）
require('jr-qrcode');
 
// 方法2：变量引用
var jrQrcode = require('jr-qrcode');
 
// 模块方法调用，传入字符串，获取 base64 编码的图片 URL
var imgBase64 = jrQrcode.getQrBase64('hello world');

1.1.4. 用法

var imgBase64 = jrQrcode.getQrBase64(text, options);

/**
@param: text: 要生成二维码的字符，支持中文
@param: options: {
  padding       : 10,   // 二维码四边空白（默认为10px）
  width         : 256,  // 二维码图片宽度（默认为256px）
  height        : 256,  // 二维码图片高度（默认为256px）
  correctLevel  : QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
  reverse       : false,        // 反色二维码，二维码颜色为上层容器的背景颜色
  background    : "#ffffff",    // 二维码背景颜色（默认白色）
  foreground    : "#000000"     // 二维码颜色（默认黑色）
}
@return: 生成的二维码Base64 URL
*/

---

1.1.5. 二维码容错级别

QRErrorCorrectLevel = {
  L : 1,
  M : 0,
  Q : 3,
  H : 2
};

1.1.6. 示例

import React from "react";
import ReactDOM from "react-dom";
import jrQrcode from "jr-qrcode";

class Demo extends React.Component {
  render() {
    return (
      <div>
        <img
          src={jrQrcode.getQrBase64("115jZG3RA615FSha51FNj3Z8tbZ7Jo48Uu", {
             160,
            height: 160
          })}
        />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById("container"));

1.1.7. 效果图