先簡單說一下jquery-qrcode,這個開源的三方庫(可以從https://github.com/jeromeetienne/jquery-qrcode獲取),
qrcode.js 是實現二維碼數據計算的核心類,
jquery.qrcode.js 是把它用jquery方式封裝起來的,用它來實現圖形渲染,其實就是畫圖(支持canvas和table兩種方式)
最常見的QR二維碼糾錯分有幾級,糾錯級別越高,整體需要攜帶的信息越多:
L級可糾正約7%錯誤,
M級別可糾正約15%錯誤,
Q級別可糾正約25%錯誤,
H級別可糾正約30%錯誤。
text : "https://github.com/jeromeetienne/jquery-qrcode" //設置二維碼內容
render : "canvas",//設置渲染方式 (有兩種方式 table和canvas,默認是canvas)
width : 256, //設置寬度
height : 256, //設置高度
typeNumber : -1, //計算模式
correctLevel : 0,//糾錯等級
background : "#ffffff",//背景顏色
foreground : "#000000" //前景顏色
示例:
<script type='text/javascript'src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<scripttype="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<divid="qrcode"></div>
jQuery('#qrcode').qrcode({render:canvas,width:64,height: 64,correctLevel:0,text:"https://github.com/jeromeetienne/jquery-qrcode"});
常見問題
1.在chorme瀏覽器中二維碼生成成功後無法掃描解決方法:
//改成使用table的渲染方式,親測支持各種各版本的瀏覽器
jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,render: "table",text: "http://blog.csdn.net/mr_smile2014"});
2.在微信或手機瀏覽器中生成的二維碼無法掃描解決方法;
//改成使用默認的渲染方式,支持微信和QQ內置瀏覽器及其它手機瀏覽器
jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,text: "http://blog.csdn.net/mr_smile2014"});
3.jquery.qrcode生成二維碼內容不支持中文
jquery-qrcode這個庫是採用 charCodeAt() 這個方式進行編碼轉換的,這個方法默認會獲取它的 Unicode 編碼,一般的解碼器都是採用UTF-8, ISO-8859-1等方式。
英文是沒有問題,如果是中文,一般情況下Unicode是UTF-16實現,長度2位,而UTF-8編碼是3位,這樣二維碼的編解碼就不匹配了。
解決方式當然是,在二維碼編碼前把字符串轉換成UTF-8,具體代碼如下:
jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,text: utf16to8("jquery-qrcode媽賣批!")});
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;