H5或pc端网站将文字或链接生成二维码

以下便是网页里生成二维码的全部代码,生成出来的二维码是一个canvas,声称在code标签内,可在CSS将#code设置好位置和样式,然后将canvas调整好,如: #code canvas{ width:100%; heigh...

以下便是网页里生成二维码的全部代码,生成出来的二维码是一个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>

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章