以下便是网页里生成二维码的全部代码,生成出来的二维码是一个canvas,声称在code标签内,可在CSS将#code设置好位置和样式,然后将canvas调整好,如:
#code canvas{
width:100%;
height:100%;
}
将要生成的东西赋给str
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
</head>
<body>
<style>
@media screen
{
#canvas
{
display: block;
}
img
{
display: none;
}
}
/*打印状态下的样式*/
@media print
{
#canvas
{
display: none;
}
img
{
display: block;
}
}
</style>
<input type="text" id="txt">
<button id="btnEncode">生成二维码</button>
<hr />
<div id="code"></div><br>
<!--<img id="image" src="" />-->
</body>
<script>
$(function () {
//生成二维码
$("#btnEncode").click(function () {
$("#code").empty();
var str = '这里放要生成的文字或链接';
// str=toUtf8(str);
$("#code").qrcode({
render: "canvas", //table方式
width: 200, //宽度
height:200, //高度
text: str //任意内容
});
});
});
</script>
</html>