Skip to content

Qianduanzu/jquery-qrcode

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 渲染模块;

参考资料

二维码的生成细节和原理

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%