博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。
【摘要】juqery.qrcode.js是jQuery在线生成二维码插件，此JS特效基于HTML5的一些特效,如Canvas绘图，因此浏览的浏览器需要支持HTML5特性，插件支持自定义LOGO功能，支持文字和图片两种模式，支持自定义LOGO位置、支持自定义二维码颜色、背景颜色、错误纠正模式、二维码圆滑度，非常强大的自定义功能，能够快速的打造你漂亮的二维码图片，非常不错的jQuery插件，值得学习和使用。
jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。 此插件是能够独立使用的，体积也比较小，使用gzip压缩后才不到4kb。
需要的js库：jquery-1.8.3.min.js、jquery.qrcode.min.js
插件下载地址：百度搜索可以找到很多
<!DOCTYPE html>
<html>
<head>
<title>jquery.qrcode.js生成非图二维码</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<meta charset="utf-8" />
<head>
<script type="text/javascript">
function generateQRCode(rendermethod, picwidth, picheight, url) { $("#qrcode").qrcode({ render: rendermethod, // 渲染方式有table方式（IE兼容）和canvas方式
width: picwidth, //宽度
height:picheight, //高度
text: utf16to8(url), //内容
typeNumber:-1,//计算模式
correctLevel:2,//二维码纠错级别
background:"#ffffff",//背景颜色
foreground:"#000000" //二维码颜色
});
}
function init() { generateQRCode("table",200, 200, "http://www.numberer.net/"); }
// 中文编码格式转换
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;
}
</script>
</head>
<body onLoad="init()">
<h1>非图片二维码生成</h1>
<div id="qrcode"></div>
</body>
</html>
需要的js库：jquery-1.8.3.min.js、excanvas.compiled.js、jquery.qrcode.min.js
插件下载地址：excanvas.compiled.js在网上是可以下载到的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery.qrcode.js生成图片二维码</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="excanvas.compiled.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<head>
<script type="text/javascript">
function generateQRCode(rendermethod, picwidth, picheight, url) { $("#qrcode").qrcode({ render: rendermethod, // 渲染方式有table方式（IE兼容）和canvas方式
width: picwidth, //宽度
height:picheight, //高度
text: utf16to8(url), //内容
typeNumber:-1,//计算模式
correctLevel:2,//二维码纠错级别
background:"#ffffff",//背景颜色
foreground:"#000000" //二维码颜色
});
}
function init() { generateQRCode("table",200, 200, "http://www.numberer.net/"); var margin = ($("#qrcode").height()-$("#codeico").height())/2; $("#codeico").css("margin",margin); }
//中文编码格式转换
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;
}
</script>
<style type="text/css">
#codeico{ //生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"
position:fixed;
z-index:9999999;
width:30px;
height:30px;
background:url("./1.png") no-repeat; }
</style>
</head>
<body onLoad="init()">
<h1>有图二维码生成</h1>
<div id="qrcode">
<div id="codeico"></div>
</div>
</body>
</html>
版权归 马富天个人博客 所有
本文标题：《使用jQuery的插件juqery.qrcode.js生成二维码》
本文链接地址：http://www.mafutian.com/164.html
转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^
顶0
踩0
| 评论审核未开启 |
|
||
|