js 生成二維碼圖片

1.用純JavaScript實現的微信二維碼圖片生成器

QRCode.js是javascript實現二維碼(QRCode)制作生成庫。 QRCode.js有着良好的跨瀏覽器兼容性（高版本使用HTML5的 Canvas，低版本IE使用table元素繪制），而且QRCode.js沒有任何依賴。只需要引用一個JS。

兼容: 幾乎支持所有瀏覽器： IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile

項目地址: http://davidshimjs.github.io/qrcodejs/

github 地址: https://github.com/davidshimjs/qrcodejs

// 基本使用, 首先需要添加對qrcode.js的引用，並創建一個空DIV

<script>
new QRCode(document.getElementById("qrcode"), "http://www.ssports.com/");
</script>

// 更多參數可以選

var qrcode = new QRCode("test", {
    text: "http://jindo.dev.naver.com/collie",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

// 你可以動態地改變二維碼圖片

<script>
qrcode.clear();
qrcode.makeCode("http://naver.com");
</script>

 

2.SVG矢量圖用來生成二維碼圖片

JsBarcode 是一個生成條形碼的開源庫支持的有: CODE128 CODE128 (自動模式切換) CODE128 A/B/C (強制模式)等，在現代流量器上它會生成一個SVG矢量圖用來生成條形碼，使用如下

項目主頁： https://github.com/lindell/JsBarcode

// 基本使用

var JsBarcode = require('jsbarcode');
var Canvas = require("canvas");

var canvas = new Canvas();
JsBarcode(canvas, "Hello");

// Do what you want with the canvas
// See https://github.com/Automattic/node-canvas for more information

 

3.H5實現的JavaScript掃碼庫

quaggaJS是由H5實現的JavaScript掃碼庫，能將條形碼掃描成文字，支持靜態圖片和視頻流的掃描。

項目主頁 https://github.com/serratus/quaggaJS

// 使用方法

Quagga.init({
    inputStream : {
      name : "Live",
      type : "LiveStream",
      target: document.querySelector('#yourElement')    // Or '#yourElement' (optional)
    },
    decoder : {
      readers : ["code_128_reader"]
    }
  }, function(err) {
      if (err) {
          console.log(err);
          return
      }
      console.log("Initialization finished. Ready to start");
      Quagga.start();
  });

 

4.這里有一個Server端使用Node.JS生成二維碼圖片的庫，有興趣的同學也可以研究一下

項目地址: https://github.com/soldair/node-qrcode