jr-qrcode生成二维码

发表于

二维码js生成库

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

兼容

使用H5的canvas特性进行绘制, 只要支持canvas即可.

安装

1
npm install jr-qrcode

使用

1.引入jr-qrcode, 并赋值给变量jrQrcode

1
import * as jrQrcode from 'jr-qrcode';

2.使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
*/

3.将imgBase64复制给图片的src即可显示

扫码图标css

1
2
3
4
5
6
<div class="icon">
  <div class="b"></div>
  <div class="h"></div>
  <div class="s"></div>
  <div class="z"></div>
</div>

样式

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
31
32
33
34
35
36
37
38
.icon {
  margin: 0 10px;
  width: 26px;
  height: 26px;
  position: relative;
  cursor: pointer;
  .b {
    border: 3px solid #1976d2;
    width: 100%;
    height: 100%;
    border-radius: 3px
  }
  .h {
    background-color: #fff;
    width: 112%;
    height: 50%;
    position: absolute;
    left: 0;
    top: 25%
  }
  .s {
    background-color: #fff;
    width: 50%;
    height: 112%;
    position: absolute;
    left: 25%;
    top: 0
  }
  .z {
    background-color: #1976d2;
    width: 60%;
    height: 2px;
    line-height: 0;
    font-size: 0;
    position: absolute;
    left: 20%;
    top:  calc(50% - 1px);
  }