纯js二维码生成插件

qrjs2.js是一款仿纯js二维码生成插件。该二维码生成插件能生成4种类型的二维码：SVG格式的二维码，data URI为SVG的图像，data URI为PNG的图像，和表格形式的二维码。

安装

可以通过npm和bower来安装qrjs2.js插件。

npm install qrjs2
bower install qrjs2                  
                

使用方法

在页面中引入qrjs2.min.js文件。

<script type="text/javascript" src="path/to/qrjs2.min.js"></script> 
                

生成svg二维码

通过下面的代码可以生成svg格式的二维码。

var svgElement = document.createElement("div"),
u = "http://www.htmleaf.com/",
s = QRCode.generateSVG(u, {
    ecclevel: "M",
    fillcolor: "#FFFFFF",
    textcolor: "#373737",
    margin: 4,
    modulesize: 8
  });
svgElement.appendChild(s);
document.body.appendChild(svgElement);               
                

生成后的代码如下：

<svg viewBox="0 0 264 264" style="shape-rendering:crispEdges">
  <style scoped="scoped">.bg{fill:#FFFFFF}.fg{fill:#373737}</style>
  <rect class="bg" fill="none" x="0" y="0" width="264" height="264"></rect>
  <rect class="fg" fill="none" x="32" y="32" width="8" height="8"></rect>
    ...
</svg>
                

生成Data URI SVG格式的二维码

通过下面的代码可以生成Data URI SVG格式的二维码。

if (document.implementation.hasFeature("http://www.w3.org/2000/svg","1.1")) {
  var dataUriSvgImage = document.createElement("img"),
  u = "http://www.htmleaf.com/",
  s = QRCode.generateSVG(u, {
      ecclevel: "M",
      fillcolor: "#FFFFFF",
      textcolor: "#373737",
      margin: 4,
      modulesize: 8
    });
  var XMLS = new XMLSerializer();
  s = XMLS.serializeToString(s);
  s = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(s)));
  dataUriSvgImage.src = s;
  document.body.appendChild(dataUriSvgImage);
}        
                

生成后的代码如下：

<img src="data:image/svg+xml;base64,...">
                

生成Data URI PNG格式的二维码

通过下面的代码可以生成Data URI PNG格式的二维码。

u = "http://www.htmleaf.com/",
s = QRCode.generatePNG(u, {
    ecclevel: "M",
    format: "html",
    fillcolor: "#FFFFFF",
    textcolor: "#373737",
    margin: 4,
    modulesize: 8
  });
dataUriPngImage.src = s;
document.body.appendChild(dataUriPngImage);     
                

生成后的代码如下：

<img src="data:image/png;base64,...">
                

生成表格格式的二维码

通过下面的代码可以生成表格元素格式的二维码。

var htmlTable = document.createElement("div"),
u = "http://www.htmleaf.com/",
s = QRCode.generateHTML(u, {
    ecclevel: "M",
    fillcolor: "#FFFFFF",
    textcolor: "#373737",
    margin: 4,
    modulesize: 8
  });
htmlTable.appendChild(s);
document.body.appendChild(htmlTable);  
                

生成后的代码如下：

<table style="border:32px solid #FFFFFF;background:#FFFFFF" cellspacing="0" cellpadding="0" border="0">
  <tbody>
      <tr>
          <td style="width:8px;height:8px;background:#373737"></td>
      ...
    </tr>
  </tbody>
</table>
                

qrjs2.js二维码生成插件的github地址为：https://github.com/englishextra/qrjs2