通过js生成二维码
1、引入如下js
<script type="text/javascript" src="js/codes/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/codes/jquery.qrcode.js"></script>
<script type="text/javascript" src="js/codes/qrcode.js"></script>
<script type="text/javascript" src="js/codes/utf.js"></script>
注:
这里我使用qrcode的时候发现我的版本对jq1.8.2以上的版本不支持,使用高版本的jq会出现二维码生成不了的现象,所以建议使用时,看jq是否适合当前qrcode
2、二维码生成
<script>
var cont = '{"userId" :"JG201809210008","userName" :"巨感", "userAvatar" :"http://134.98.1.18:8080/upload/be569a4c2ce241188f1861ffe6da86d4.png"}';
$('#qrcode').qrcode({
render: "canvas",
width: "260", //二维码的宽度
height: "260",
text:cont,//<!-- 二维码内容 -->
src:"http://134.98.1.18:8080/upload/be569a4c2ce241188f1861ffe6da86d4.png"
});
</script>
3、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/codes/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/codes/jquery.qrcode.js"></script>
<script type="text/javascript" src="js/codes/qrcode.js"></script>
<script type="text/javascript" src="js/codes/utf.js"></script>
<body>
<div class="qr-img" id="qrcode"></div>
<div class="code-bottom">扫一扫</div>
</body>
<script>
var cont = '{"userId" :"JG201809210008","userName" :"巨感", "userAvatar" :"http://134.98.1.18:8080/upload/be569a4c2ce241188f1861ffe6da86d4.png"}';
$('#qrcode').qrcode({
render: "canvas",
width: "260", //二维码的宽度
height: "260",
text:cont,//<!-- 二维码内容 -->
src:"http://134.98.1.18:8080/upload/be569a4c2ce241188f1861ffe6da86d4.png"
});
</script>
</html>
4、效果展示