二維碼QRCode

時間 2019-11-08

標籤二維 qrcode 欄目二維碼简体版

原文原文鏈接

1、二維碼介紹

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

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

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

2、客戶端生成二維碼

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

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

使用方法：github

添加標籤做爲容器：瀏覽器

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

添加插件引用：安全

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

調用生成方法：服務器

簡單生成ide

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>

結果：