用jquery-qrcode.js生成二维码

JQuery和jquery-qrcode.js实现网页生成二维码图片

1. html布局，文本框输入二维码内容，点击按钮生成二维码

html代码

	
		
		
		
		
		
	
	
		

			

				显示二维码
			
			

				
			
		
		

	

2. jQuery实现二维码的布局显示，根据内容设置二维码大小，设置logo等
jQuery代码

$(function(){
	//$('#QRCode').qrcode("www.baidu.com");
	//名片格式定义
	var vcard = "BEGIN:VCARD" + '\n'
		+ "VERSION:2.1" + '\n'
		+ "N:" + '\n'
		+ "FN:a digger" + '\n'
		+ "ORG:自由职业公司公司" + '\n'
		+ "TITLE:" + '\n'
		+ "TEL;WORK;VOICE:10010001000" + '\n'
		+ "TEL;HOME;VOICE:" + '\n'
		+ "TEL;CELL;VOICE:10010001000" + '\n'
		+ "ADR;WORK:;;地址;城市;省份;;国际" + '\n'
		+ "LABEL;WORK;ENCODING=QUOTED-PRINTABLE:" + '\n'
		+ "ADR;HOME:" + '\n'
		+ "LABEL;HOME;ENCODING=QUOTED-PRINTABLE:" + '\n'
		+ "EMAIL;PREF;INTERNET:[email protected]" + '\n'
		+ "REV:" + '\n'
		+ "END:VCARD;" 
})
function ShowQRCode(){
	var data = $('textarea').val();
	var module = 3;
	if (data.length < 250){
		module = 8;
	}
	$('#QRCode').qrcode({
		//render: 'table',
		text: data,			//二维码扫码返回值
		bgColor:"#ffddff",		//二维码背景颜色 
		render:"canvas",    	//二维码显示方式
		moduleColor:"#d10", 	//二维码前景色(条纹色)
		moduleSize:module,   		//二维码大小
		margin:4,				//二维码外边距
		logo:"./img/logo.png"	//二维码logo
	});
}

效果图展示

1. 二维码链接效果图
   
   ![扫码示例](https://img-blog.csdnimg.cn/8afaaa4ea1b84730a57ce04bcd7a6abe.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAYSBkaWdnZXI=,size_20,color_FFFFFF,t_70,g_se,x_16
   2.二维码名片效果图