qrcode生成二维码插件

时间 2019-12-08 标签 qrcode 生成二维码插件

今天我要和你们分享的是利用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>