纯js二维码生成插件

PetitQ 其他代码 2018-10-29 2.39K 0 0

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

使用方法：

在页面中引入 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

纯 js 二维码生成插件

已有 599 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

纯js二维码生成插件

使用方法：

生成 svg 二维码：

代码如下：

生成 Data URI SVG 格式：

生成 Data URI PNG 格式：

生成表格格式：

纯 js 二维码生成插件

相关文章

可视化CSS3渐变背景颜色代码生成

jQuery鼠标吸附动画特效插件

loaders - 纯CSS3超酷Loading加载指示器特效

发表回复取消回复

热销模板

其他代码

使用方法：

生成 svg 二维码：

代码如下：

生成 Data URI SVG 格式：

生成 Data URI PNG 格式：

生成表格格式：

纯 js 二维码生成插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复