这里给大家介绍两种方式,推荐使用第二种。
第一种:使用基于jquery.MyQRCode.js插件,此二维码是基于https://chart.googleapis.com/chart?chs={size}&cht=qr&chl={content}&choe={encoding} 这个网址生成的,只是沟通js封装,依赖性很强。
<html>
<head>
<title>生成二维码</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.MyQRCode.js"></script>
<script type="text/javascript">
jQuery(function () {
jQuery("#qrCodeDiv").MyQRCode(
{
content: "设置二维码的内容。",
size: "400x400"
});
});
</script>
</head>
<body>
<div id="qrCodeDiv">
</div>
</body>
</html>
第二种,基于jquery.qrcode.min.js插件生成,这种方式方便快捷效率高,qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码。示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script type="text/javascript">
function generateCode() {
$("#code").qrcode({
render : "table", //table方式
width : 100, //宽度
height : 100, //高度
text : toUtf8($("#info").val())
//任意内容
});
}
</script>
</head>
<body>
This is my JSP page.
<br>
<input type="text" name="info" id="info" />
<input type="button" value="生成" onclick="generateCode()">
<div id="code"></div>
</body>
</html>
网友评论