<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery基于qrcode.js网页二维码生成插件</title>
<style>
.sm{
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
</style>
</head>
<body onLoad="createQrcode()"> <!--默认载人方法-->
<div id='qrcode' style='margin-left: 45%; margin-top: 10%'></div>
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/qrcode.js"></script>
<script type="text/javascript" src="js/utf.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.js" ></script>
<script type="text/javascript">
function makeCode(url) {
$("#qrcode").qrcode({
render: "canvas",
text: url,
width : "200", //二维码的宽度
height : "200", //二维码的高度
background : "#ffffff", //二维码的后景色
foreground : "#000000", //二维码的前景色
src: 'img/logo.png' //二维码中间的图片
});
}
function createQrcode () {
var url = 'https://www.lanrenzhijia.com';//$('#url').val();
makeCode(url);
}
</script>
<div class="sm">$("#qrcode").qrcode({<br>
render: "canvas",<br>
text: url,<br>
width : "200", //二维码的宽度<br>
height : "200", //二维码的高度<br>
background : "#ffffff", //二维码的后景色<br>
foreground : "#000000", //二维码的前景色<br>
src: './logo.png' //二维码中间的图片<br>
});
</div>
</body>
</html>