QRCode 二维码生成

发表于

使用

1
<div id="ele"></div>
1
2
3
4
5
6
7
8
9
var ele = document.getElementById('ele')
new QRCode(ele, {
    text: 'www.yuewen.com',
    width: 86,
    height: 86,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
});

模糊识别 correctLevel

更高的级别可以识别更模糊的二维码，但会降低二维码的容量。如果生成的二维码不会被破坏，建议使用低识别等级。

等级 最大模糊面积
L（低级） ≤7%
M（中级） ≤15%
Q（四分之一） ≤25%
H（高级） ≤30%

默认是 QRCode.CorrectLevel.M

模糊识别等级也会影响二维码容量（当然版本也会影响）

编码模式 L（低级） M（中级） Q（四分之一） H（高级）
数字 7089 5596 3993 3057
数字+字母 4296 3391 2420 1852
字节 2953 2331 1663 1273
汉字 1817 1435 1024 784

关于生成二维码识别率不高

  • 二维码图片过小会影响识别率

  • 本身 canvas 在绘图时，会有像素模糊，可以通过放大倍数，在二维码生成阶段可以生成 2 倍大小、然后通过 css 设置还原设计稿大小

  • 字符串比较长，就会加大二维码的像素复杂度,通过转换短连接缩短二维码长度

  • 可以通过给二维码设置边框来提高识别率

其他

更多 api qrcode