网页生成二维码
- 导入生成二维码需要的js文件（https://github.com/lrsjng/jquery-qrcode）
| <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script> <script type="text/javascript" src="js/jquery.qrcode.js" ></script> <script type="text/javascript" src="js/qrcode.js" ></script> <script type="text/javascript" src="js/utf.js" ></script> |
- 网页写入样式
| <body> <p>Render in table</p> <div id="qrcodeTable"></div> <p>Render in canvas</p> <div id="qrcodeCanvas"></div> </body> |
- 写入js代码
| <script> jQuery('#qrcodeTable').qrcode({ render : "table", <!--二维码生成方式 --> text : "http://www.baidu.com" , <!-- 二维码内容 --> width : "200", //二维码的宽度 height : "200", }); jQuery('#qrcodeCanvas').qrcode({ render : "canvas", text : "http://www.baidu.com", width : "200", //二维码的宽度 height : "200", //二维码的高度 background : "#ffffff", //二维码的后景色 foreground : "#000000", //二维码的前景色 src: 'img/gray.jpg' //二维码中间的图片 }); </script> |
- 效果：
将二维码变成图片
| <script> var aa=jQuery(‘#qrcodeTable').qrcode({ render : "table", <!--二维码生成方式 --> text : "http://www.baidu.com" , <!-- 二维码内容 --> width : "200", //二维码的宽度 height : "200", }).hide();//将生成的二维码隐藏起来 //将二维码生成图片 var canvas=aa.find(‘canvas’).get(0); //这里我们需要在页面定义一个img标签，<img id=”qrcodeImg’”></img> $(‘#qrcodeImg’).attr(‘src’,canvas.toDataURL()); </script> |
下载二维码
| 先在页面定义一个按钮 <button id="ss">下载图片</button> 给按钮添加响应事件 <script> $(function(){ $(“#ss”).click(function(){ downloadImage(‘qrcodeImg’,’picture’)//第一个参数是img的id 第二个参数是你随便取得名称 }); }); function downloadImage(selector,name){ // 通过选择器获取img元素 var img = $("#selector"); // 将图片的src属性作为URL地址 var url=document.getElementById(selector).src; var a = document.createElement('a') var event = new MouseEvent('click') a.download = name || name a.href = url a.dispatchEvent(event) } </script> |
| <%@page contentType="text/html; charset=UTF-8"%> <%@taglib uri="/struts-tags" prefix="s"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ page isELIgnored="false"%> <!DOCTYPE html> <html> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>活动详情</title>
<link href="jules/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> <link href="jules/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="jules/css/animate.min.css" rel="stylesheet"> <link href="jules/css/style.min862f.css?v=4.1.0" rel="stylesheet"> <script src="jules/js/bootstrap.min.js?v=3.3.6"></script> <script type="text/javascript" src="jss/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jss/js/jquery.qrcode.js"></script> <script type="text/javascript" src="jss/js/qrcode.js"></script> <script type="text/javascript" src="jss/js/utf.js"></script> </head>
<body class="gray-bg"> <div id="code"></div> <button id="ss">下载图片</button> <p>Render in table</p> <div id="qrcodeTable"></div> <img src="" id="qrcodeImg" /> <br> <p>Render in canvas</p> <div id="qrcodeCanvas"></div>
<script> $(function(){ $("#ss").click(function(){
downloadIamge('qrcodeImg', 'picture') });
});
function downloadIamge(selector, name) {
// 通过选择器获取img元素 var img = $("#selector"); // 将图片的src属性作为URL地址 // var url = $("selector").attr('src'); var url=document.getElementById(selector).src; var a = document.createElement('a') var event = new MouseEvent('click') a.download = name || name a.href = url a.dispatchEvent(event) } </script> <script> var aa= jQuery('#qrcodeTable').qrcode({ render : "canvas", //<!--二维码生成方式 --> text : "http://news.baidu.com/" , //<!-- 二维码内容 --> width : "200", //二维码的宽度 height : "200", }).hide();
var bb=jQuery('#qrcodeCanvas').qrcode({ render : "canvas", text : "sss", width : "200", //二维码的宽度 height : "200", //二维码的高度 background : "#ffffff", //二维码的后景色 foreground : "#000000", //二维码的前景色 src: 'jss/img/gray.jpg' //二维码中间的图片 }); //将二维码生成图片 var canvas =bb.find('canvas').get(0); $('#qrcodeImg').attr('src', canvas.toDataURL());
</script>
</body> </html> |