前端生成二维码 --- QRCode.js

我不是女神ヾ 2022-02-27 08:54 664阅读 0赞

### 一、简介 ###

QRCode.js是一个通过js生成二维码图片的插件。通过引用这个js，前端可以很方便的生成二维码图案，不需要再通过后端进行生成调用，大大的节省了时间和资源。  
[点击查看文档][Link 1]

### 二、使用方法 ###

（1）引入js文件([下载QRCode.js][QRCode.js])

（2）DOM结构

（3）js调用

/* 1、生成简单二维码 
            优点：API简单，代码简洁
            缺点：不可设置二维码的样式参数
        */
        new QRCode(document.getElementById('myCode'),'二维码内容');
        
        /* 2、通过配置参数生成二维码
            优点：可以设置二维码的颜色和大小等参数
            缺点：参数比较多，建议二次封装成一个公共函数
        */
           var QRC = new QRCode('myCode', {
             text: '二维码内容',
             width: 256,
             height: 256,
             colorDark : '#000000',
             colorLight : '#ffffff',
             correctLevel : QRCode.CorrectLevel.H
           });
           
           // 使用 API
           qrcode.clear();
           qrcode.makeCode('new content');

### 三、API介绍 ###

#### （1）参数介绍 ####

new QRCode(ele,opt)

<table> 
 <thead> 
  <tr> 
   <th align="left">参数名称</th> 
   <th align="left">默认值</th> 
   <th align="left">参数说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">ele</td> 
   <td align="left">-</td> 
   <td align="left">生成二维码所在的元素ID</td> 
  </tr> 
  <tr> 
   <td align="left">opt</td> 
   <td align="left">-</td> 
   <td align="left">二维码的参数</td> 
  </tr> 
 </tbody> 
</table>

#### （2）二维码配置参数 ####

<table> 
 <thead> 
  <tr> 
   <th align="left">参数名称</th> 
   <th align="left">默认值</th> 
   <th align="left">参数说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">width</td> 
   <td align="left">256</td> 
   <td align="left">二维码图像的宽度</td> 
  </tr> 
  <tr> 
   <td align="left">height</td> 
   <td align="left">256</td> 
   <td align="left">二维码图像的高度</td> 
  </tr> 
  <tr> 
   <td align="left">typeNumber</td> 
   <td align="left">4</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">colorDark</td> 
   <td align="left">“#000000”</td> 
   <td align="left">前景色</td> 
  </tr> 
  <tr> 
   <td align="left">colorLight</td> 
   <td align="left">“#ffffff”</td> 
   <td align="left">背景色</td> 
  </tr> 
  <tr> 
   <td align="left">correctLevel</td> 
   <td align="left">QRCode.CorrectLevel.L</td> 
   <td align="left">容错级别，可设置为：容错级别，可设置为：<br>&nbsp;&nbsp;&nbsp;&nbsp;QRCode.CorrectLevel.L<br> &nbsp;&nbsp;&nbsp;&nbsp;QRCode.CorrectLevel.M<br> &nbsp;&nbsp;&nbsp;&nbsp;QRCode.CorrectLevel.Q <br> &nbsp;&nbsp;&nbsp;&nbsp;QRCode.CorrectLevel.H</td> 
  </tr> 
 </tbody> 
</table>

#### (3) API接口 ####

<table> 
 <thead> 
  <tr> 
   <th align="left">参数名称</th> 
   <th align="left">参数说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">makeCode(text)</td> 
   <td align="left">设置二维码内容（text:新的内容）</td> 
  </tr> 
  <tr> 
   <td align="left">clear()</td> 
   <td align="left">清除二维码。（仅在不支持 Canvas 的浏览器下有效）</td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: http://code.ciaoca.com/javascript/qrcode/
[QRCode.js]: http://code.ciaoca.com/javascript/qrcode/version/qrcodejs.zip