以下便是网页里生成二维码的全部代码,生成出来的二维码是一个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>
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!