一、二維碼介紹

二維碼的應用越來越多，開發中會經常使用，這里主要從二維碼的介紹、客戶端生成與服務器端生成三個方面講解二維碼。二維碼又稱二維條碼，常見的二維碼為QR Code，QR全稱Quick Response，是一個近幾年來移動設備上超流行的一種編碼方式，它比傳統的Bar Code條形碼能存更多的信息，也能表示更多的數據類型。

二維碼是信息的載體，通俗說就像我們使用的U盤，能存儲一定量的信息在二維碼中。

二維條碼/二維碼（2-dimensional bar code）是用某種特定的幾何圖形按一定規律在平面（二維方向上）分布的黑白相間的圖形記錄數據符號信息的；在代碼編制上巧妙地利用構成計算機內部邏輯基礎的“0”、“1”比特流的概念，使用若干個與二進制相對應的幾何形體來表示文字數值信息，通過圖象輸入設備或光電掃描設備自動識讀以實現信息自動處理：它具有條碼技術的一些共性：每種碼制有其特定的字符集；每個字符占有一定的寬度；具有一定的校驗功能等。同時還具有對不同行的信息自動識別功能、及處理圖形旋轉變化點。

二、客戶端生成二維碼

在客戶端生成二維碼會降低服務器的運算與存儲壓力，當然要考慮安全性與兼容性。這里使用一個成熟的jQuery插件完成該功能，支持中文不依賴jQuery插件，源代碼如下：

github:https://github.com/jeromeetienne/jquery-qrcode

使用方法：

添加標簽作為容器：

<div id="qrCode"></div>

添加插件引用：

<script src="js/jqQrcode/qrcode.min.js" type="text/javascript" charset="utf-8"></script>

調用生成方法：

簡單生成

new QRCode(document.getElementById("qrcode"), "內容");

帶參數生成

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "內容",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

參數：

width 256  圖像寬度
height    256    圖像高度
typeNumber    4     
colorDark    "#000000"    前景色
colorLight    "#ffffff"    背景色
correctLevel    QRCode.CorrectLevel.L    容錯級別，可設置為：
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H

方法：

makeCode(text)    設置二維碼內容
clear()    清除二維碼。（僅在不支持 Canvas 的瀏覽器下有效）

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <textarea id="txtContent" cols="50" rows="5"></textarea>
        <button type="button" onclick="getCode();">生成</button>
        <div id="qrCode"></div>
        <script src="js/jqQrcode/qrcode.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var qrCode = document.getElementById("qrCode");
            var txtContent = document.getElementById("txtContent");
            var qrcode=new QRCode(qrCode,{
                        width:300,
                        height:300,
                        correctLevel:QRCode.CorrectLevel.L
                    });
                    
            function getCode() {
                qrcode.makeCode(txtContent.value);
            }
        </script>
    </body>

</html>

結果：