qrcode生成二維碼插件

時間 2019-12-08

原文原文鏈接

今天我要和你們分享的是利用qrcode來生成二維碼。javascript

首先要使用qrcode就須要引用文件，我這邊用的是1.7.2版本的jquery加上qrcodehtml

引入文件後咱們就能夠生成一個I love you的二維碼。jquery

代碼以下：canvas

$(function(){
$("#canvasqrcode").qrcode("I love you!"); 函數

});this

在body裏面增長<div id="canvasqrcode"></div>就大功告成了插件

要是調整大小能夠用如下代碼width,height後面默認是px寫死在插件中，固然能夠調整下插件。code

$("#miniCodeOne").qrcode({width: 64,height: 64,text:"I love you!"});htm

另外也能夠控制渲染方式

用下面代碼render能夠選擇table或者canvas來進行渲染

$("#qrcode").qrcode({render: "table",text:"this plugin is
great"});

可是漢字支持不夠咱們須要進行轉換

如下是函數

;function toUtf8(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;
}

下面貼上個人網頁代碼

<!DOCTYPE html><html><head><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript" src="jquery.qrcode.min.js"></script><script type="text/javascript"> ;function toUtf8(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; } $(function(){ // render: "table", //table方式，canvas $("#qrcode").qrcode({render: "table",text:"this plugin is great"}); $("#canvasqrcode").qrcode("I love you!"); $("#chinaCode").qrcode(toUtf8("中國我愛你")); $("#miniCode").qrcode({width: 64,height: 64,text:toUtf8("中國我愛你")}); $("#miniCodeOne").qrcode({width: 64,height: 64,text:toUtf8("中國我愛你")}); $("#colorCodeOne").qrcode({ text: "http://www.gbtags.com", width: 260, height: 260, foregroun: '#FF0000' });});</script></head><body><div id="qrcode"></div><br/><br/><br/><br/><br/><br/><div id="canvasqrcode"></div><br/><br/><br/><br/><br/><br/><div id="chinaCode"></div><br/><br/><br/><br/><br/><br/><div id="miniCode"></div><br/><br/><br/><br/><br/><br/><div id="miniCodeOne"></div><br/><br/><br/><br/><br/><br/><div id="colorCodeOne"></div></body></html>