用jquery-qrcode.js生成二维码

最新推荐文章于 2024-04-24 16:00:29 发布

a digger

最新推荐文章于 2024-04-24 16:00:29 发布

阅读量1k

点赞数

文章标签： jquery ajax html

本文链接：https://blog.csdn.net/shiwu520/article/details/120840375

版权

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

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

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JQuery QRCode Test</title>
		<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
		<script type="text/javascript" src="js/jquery-qrcode.min.js" ></script>
		<script type="text/javascript" src="js/WebQRCode.js" ></script>
	</head>
	<body style="text-align: center;">
		<div id="myTarget" style="float: left;">
			<div>
				<button id='btn_showimg' onclick="ShowQRCode()">显示二维码</button>
			</div>
			<div style="margin-top: 10px;">
				<textarea rows="20" cols="30" placeholder="请输入二维码的内容"></textarea>
			</div>
		</div>
		<div id="QRCode" style="float: left; margin-left: 30px;" ></div>
	</body>
</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
	});
}

效果图展示

二维码链接效果图

![扫码示例](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.二维码名片效果图

a digger

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
用jquery-qrcode.js生成二维码

JQuery和jquery-qrcode.js实现网页生成二维码图片html布局，文本框输入二维码内容，点击按钮生成二维码html代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>JQuery QRCode Test</title> <script type="text/javascript" src="js/jquery-1.9
复制链接

扫一扫