首页 > 代码库 > qrcode生成二维码插件
qrcode生成二维码插件
今天我要和大家分享的是利用qrcode来生成二维码。
首先要使用qrcode就需要引用文件，我这边用的是1.7.2版本的jquery加上qrcode
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/jquery.qrcode.min.js"></script>
引入文件后我们就可以生成一个I love you的二维码。
代码如下：
$(function(){
$("#canvasqrcode").qrcode("I love you!");
});
在body里面增加<div id="canvasqrcode"></div>就大功告成了
要是调整大小可以用以下代码width,height后面默认是px写死在插件中，当然可以调整下插件。
$("#miniCodeOne").qrcode({width: 64,height: 64,text:"I love you!"});
另外也可以控制渲染方式
用下面代码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="http://www.mamicode.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/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>
qrcode生成二维码插件