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


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


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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/161.html