用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:mrwu-web@space.cn" + '\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.二维码名片效果图
   
   

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！