纯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文件。

生成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);

生成后的代码如下：

生成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);
}

生成后的代码如下：

生成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);

生成后的代码如下：

生成表格格式的二维码

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

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);

生成后的代码如下：