jquery.qrcode二维码插件—源码下载及使用实例推荐 亲测 收藏

文章标签: 图片特效
  • :
  • 03-22 18:22
  • :
  • 120次
  • :
  • 0条
  • 3赞

简介jquery.qrcode插件的下载,及生成二维码的在线实例演示。

和大家分享一款非常好用的,jquery里生成二维码的插件:jquery.qrcode

一:插件的下载:

//GitHub地址:
https://github.com/jeromeetienne/jquery-qrcode

//百度云下载:
链接: https://pan.baidu.com/s/1Edz6e74hU62shZBD-cfozQ 提取码: fs63 

//免费CDN加速:
https://www.bootcdn.cn/jquery.qrcode/

二:使用方法:

和所有的jquery插件一样,直接把jquery库和jquery插件一起引入到页面里,就可使用了:

//#Code 为要显示二维码的div
$('#Code').qrcode("http://www.aijquery.cn");

或者这样来用:
$("#Code").qrcode({	
    render: "table", //table方式
    width: 200, //宽度
    height:200, //高度
    text: "www.aijquery.cn" //任意内容
});

render :表示生成二维码的方式,jquery.qrcode插件支持canvas和table两种方式来生成二维码,默认是canvas,但需要浏览器支持HTML5(现在基本上都支持HTML5)。

三:注意:

jquery.qrcode插件可以把任意内容都生成二维码,但在生成的内容里有中文的时候,需要把中文换成UTF-8编码才行,下面是把字符转为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;    
}

四:完整实例:

HTML结构:

<input type="text" id="text">
<button id="btn">生成二维码</button>
<div id="Code"></div>

jquery代码:

$("#btn").on("click",function(){
  	var $Code=$("#Code");
 	$Code.empty();
  	var str = toUtf8($("#text").val());
  	$Code.qrcode({
		render: "canvas", //或 table
		width: 200,
		height:200,
		text: str
	});
});

记得把上面的转utf-8的函数引入进去。

这里是完整的在线实例演示:jquery生成二维码在线演示



您正在找的文章可能是: