二維碼相關知識

一、關於前景色和背景色：

　　二維碼的背景色的設置必定要比前景色和定位點的顏色要淺

2. 包含的文字內容建議不超過150個漢字（爲了低端手機也能掃描）

3. 製做帶二維碼圖片時應該生成高糾錯等級的圖片，嵌入的圖片不能超過二維碼圖案的30%

 

 

畢業設計要求完成： 

可以方便地根據輸入信息自動生成二維碼圖片。

能夠根據須要自由設置二維碼的前景色、背景色；

能夠隨意調節二維碼分佈的密集程度；

能夠設置二維碼外圍四周靜區的大小。

二維碼中間的標籤能夠是文字，其顏色、字體都可設置；也能夠是圖片，圖片大小能夠設置。

 

二維碼

Java方面二維碼相關工具大概有qrcode和zxing，

可是通常來講應用二維碼比較多的是生成，掃描用的比較少，

而qrcode和zxing是二者都有，方法比較多。

 （ZXing是一個開放源碼的，用Java實現的多種格式的1D/2D條碼圖像處理庫，它包含了聯繫到其餘語言的端口。Zxing能夠實現使用手機的內置的攝像頭完成條形碼的掃描及解碼。）

 

1、使用jquery-qrcode生成二維碼

     

      說明：jquery的一個插件，jquery-qrcode能夠利用js生成二維碼，效果不錯。這裏作一下封裝，讓使用起來更簡單。

       

       先簡單說一下jquery-qrcode，這個開源的三方庫（能夠從https://github.com/jeromeetienne/jquery-qrcode 獲取），

qrcode.js 是實現二維碼數據計算的核心類，

      jquery.qrcode.js 是把它用jquery方式封裝起來的，用它來實現圖形渲染，其實就是畫圖（支持canvas和table兩種方式）

 

1.支持的功能主要有：

text     : "https://github.com/jeromeetienne/jquery-qrcode"  //設置二維碼內容  
 

render   : "canvas",//設置渲染方式  
width       : 256,     //設置寬度  
height      : 256,     //設置高度  
typeNumber  : -1,      //計算模式  
correctLevel    : QRErrorCorrectLevel.H,//糾錯等級  
background      : "#ffffff",//背景顏色  
foreground      : "#000000" //前景顏色  

　　

 

jQuery('#output').qrcode({width:200,height:200,correctLevel:0,text:content});  

使用canvas方式渲染性能仍是很是不錯的，可是若是用table方式，性能不太理想，特別是IE9如下的瀏覽器，因此須要自行優化一下渲染table的方式，這裏就不細述了。

 

2.

<!-- jquery-1.11.1 -->  
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>  
<!-- jquery-qrcode -->  
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>  
<!-- 中文轉碼 -->  
<script type="text/javascript">  
    function qcodetochar(str){  
        var out, i, len, c;  
        out = "";  
        len = str.length;  
        for (i = 0; i < len; i++) {  
            c = str.charCodeAt(i);  
            if ((c >= 0x0001) && (c <= 0x007F)) {  
                out += str.charAt(i);  
            } else if (c > 0x07FF) {  
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));  
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  
            } else {  
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));  
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  
            }  
        }  
        return out;  
    };  
</script>  

　　

封裝:封裝是爲了更好的使用，能夠直接傳str或者一個配置對象，具體以下

 

/**  
 * 生成二維碼 
 * text：待生成文字 
 * type：中文仍是英文，cn爲中文 
 * render：展現方式，table爲表格方式 
 * width：寬度 
 * height：高度 
 * 注：須要引入<@jsfile 'qrcode'/> 
 */  
$.fn.qcode = function(options){  
    if(options){  
        var opt = {};  
        if(typeof options == 'string'){  
            opt.text = options;  
        }else{  
            if(options.text) opt.text = options.text;  
            if(options.type && options.type == 'ch') opt.text = qcodetochar(opt.text);  
            if(options.render && options.render == 'table') opt.render = options.render;  
            if(options.width) opt.width = options.width;  
            if(options.height) opt.height = options.height;  
        }  
  
        $(this).qrcode(opt);  
    }  
};  

 

　

使用

1.頁面須要一個div，並給一個id

2.$('#test').qcode({});

 

3.　jquery.qrcode.js 是一個純瀏覽器 生成 QRcode 的 jQuery 插件，它使用很是簡單，生成的 QRcode 無需下載圖片，而且不依賴第三方服務，好比最近 Google 服務在國內訪問不穩就形成我好幾個網站的 QRcode 不能使用，而且壓縮以後大小小於 4K。

<1. 加載 jQuery 和 jquery.qrcode.js：

<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script> <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<2. 建立一個用於包含 QRcode 圖片的 DOM 元素，好比 div：

<div id="qrcode"></div>

<3. 而後經過下面代碼生成 QRcode：

jQuery('#qrcode').qrcode("http://blog.wpjam.com");

<4. 默認生成的二維碼大小是 256×256，固然能夠自定義大小：

jQuery('#qrcode').qrcode({width: 64,height: 64,text: "http://blog.wpjam.com"})


jquery.qrcode.js演示
1. Canvas 方式渲染

2. Table 方式渲染，並加了 1px 描邊。

 

 

2、JS生成中文二維碼

其實上面的js有一個小小的缺點，就是默認不支持中文。

這跟js的機制有關係，jquery-qrcode這個庫是採用 charCodeAt() 這個方式進行編碼轉換的，

而這個方法默認會獲取它的 Unicode 編碼，通常的解碼器都是採用UTF-8, ISO-8859-1等方式，

英文是沒有問題，若是是中文，通常狀況下Unicode是UTF-16實現，長度2位，而UTF-8編碼是3位，這樣二維碼的編解碼就不匹配了。

解決方式固然是，在二維碼編碼前把字符串轉換成UTF-8，具體代碼以下：

function utf16to8(str) {  
    var out, i, len, c;  
    out = "";  
    len = str.length;  
    for(i = 0; i < len; i++) {  
    c = str.charCodeAt(i);  
    if ((c >= 0x0001) && (c <= 0x007F)) {  
        out += str.charAt(i);  
    } else if (c > 0x07FF) {  
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
        out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    } else {  
        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
    }  
    }  
    return out;  
}  

　　

相關資料： http://www.cnblogs.com/hq123/p/6771329.html