纯js二维码生成插件

当前位置:主页 > jQuery库 > 工具类 > 纯js二维码生成插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
纯js二维码生成插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-04-21
    阅读:
简要教程

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

网友评论