jQuery.qrcode是通过使用jQuery实现图形渲染,画图生成二维码的一款jQuery插件,支持canvas和table两种渲染方式;
使用
1.在你的网页中引入js(需要jQuery)
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
2.选在一个元素作为载体
<div id="qrcode"></div>
3.然后进行渲染(注意第二步中HTML元素的id)
jquery('#qrcode').qrcode("this plugin is great");
3.1.你还可以改变二维码的大小和配色
jquery('#qrcode').qrcode({width: 64,height: 64,text: "size doesn't matter"});
3.2.参数说明
render : "canvas",//设置渲染方式
width :64, //设置宽度
height : 64, //设置高度
typeNumber : -1, //计算模式
correctLevel : QRErrorCorrectLevel.H,//纠错等级
background : "#ffffff",//背景颜色
foreground : "#000000" //前景颜色
将生成的二维码格式改为图片格式
前面说过这个插件生成的二维码格式是canvas或table格式的,但是有些情况我们需要images格式,所以我在网上搜了一波找到了以下方法
<!---->
<div id="qrcode"></div>
<img id='qrimg' style='border:1px solid #000;'/>
<script>
//使用默认方式生成二维码,并隐藏
var qrcode= $('#divOne').qrcode('http://www.gongjuji.net/').hide();
// 获取默认生成的canvas
var canvas=qrcode.find('canvas').get(0);
// 将二维码以图片的方式渲染到img标签
$('#qrimg').attr('src',canvas.toDataURL('image/jpg'))
</script>
支持中文
由于编码问题,这个插件不支持含有中文字符的二维码“正确生成”,生成是可以生成,但是扫码后是没用的,不会如你所愿的显示你输入的内容;
<div id="qrcode"></div>
<script>
// 将字符串转换成UTF-8格式
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;
}
// 然后使用toUTF8函数生成
$('#qrcode').qrcode({
text: toUTF8('中文字符串'),
width: 64,
height: 64
});
</script>