alphatr / jquery-qrcode

jQuery QRcode

jQuery-qrcode 使用说明

简介：jQuery-qrcode 是一个前端的二维码生成库，二维码核心无依赖，针对 jquery 提供了简单的调用，使用方法如下：

二维码生成

// 在 ID 为 qrcode-div 的 DOM 上生成二维码
$('#qrcode-div').qrcode('sometext encode to qrcode');

二维码解码

// 选择器选择 canvas 元素，(或者 canvas 的父级)；返回解码结果
var decoded = $('canvas').qrdecode();

文档参考

在生成二维码的时候参数可以是 String 也可以是 Object，String 时会将字符串用默认参数生成二维码，Object 可以使用的参数如下：

参数格式

• text String

  生成二维码的文字，默认值为 "Test"；

• render String

  渲染方式; 可取值范围为 ["canvas", "table"], 默认值为 "canvas", 使用 Canvas 元素渲染；

• bgColor String

  背景色，格式如 "#ADFC23" 或 "#234" 等十六进制 CSS 颜色值, 默认值 "#FFF"；

• moduleColor String

  前景色，（即色块的颜色）如上，默认值 "#000"；

  注意：前景色要比背景色深，对比要大；

• moduleSize Integer

  色块大小，默认 5px；

• mode Integer

  编码方式，可取值范围为 [1, 2, 4], 分别指数字编码，字母编码和 8bits 编码，默认使用 8bits，根据字面含义，数字编码只能编码数字，字母编码可以编码数字和字母，8bits 可以编码 utf-8 的字符；

• ECLevel Integer

  纠错码等级，可取值范围为 [0-3]，分别指代含有15%，7%，30%，25% 的纠错码，默认为最高的 30%(2)；

• margin Integer

  四周留白倍数，默认为色块大小的 4 倍（也是推荐大小）；

• logo String

  中间的 Logo url，默认为空，不渲染 Logo；

• error Function

  报错函数，默认使用 alert 弹出，接收错误字符串的参数。

---

源码结构

如果需要对二维码进行二次开发，各个模块的功能如下

├── decode.js // 核心解码模块
├── encode.js // 核心编码模块
├── qrbase.js // 公共基础模块
├── qrcode.js // jquery 编码包装对象
├── qrdecode.js // jquery 解码对象
├── reedsolomon.js // Reed-solomon 纠错码，也是编解码的核心模块
├── render.canvas.js // 依赖 jquery 的 Canvas 渲染模块
└── render.table.js // 依赖 jquery 的 Table 渲染模块

进行二次开发

如果需要使用其他渲染方式或者需要更改一些实现，可以进行二次开发；

$.qrcode.pixArr 是一个二维的数组，分别用 0 和 1 标识二维码的色块，通过循环这个数组就可以使用自己的渲染方式；

使用 gulp 打包

使用命令 gulp 或者 gulp package 默认会对全部文件进行压缩打包，如果只需要打包解码或者编码部分则需要添加不同的参数，参数说明如下：

• --file

  可取值 'decode', 'encode', 'all' 默认参数为 all，即全部打包，decode 和 encode 表示分别打包解码和编码部分；

• --debug

  表示 debug 模式，默认会对打包的代码进行压缩；在 debug 模式下，不会压缩；

• --render

  在打包了编码模块下有效，可取值 'table', 'canvas', 'all' 默认参数为 all，即全部打包，table 和 canvas 表示分别使用 canvas 和 table 渲染模块；

参考资料

二维码的生成细节和原理

jquery-qrcode's Issues

异常无法阻止

直接上图，现在的异常捕获方式照成代码无法在不满足条件的情况下中断而抛出其他异常！而且二维码字符超出的异常只有第一次提示不是很友好！