QRCode.js：js生成二维码

http://www.runoob.com/w3cnote/javascript-qrcodejs-library.html

参考菜鸟教程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
    <title>Javascript 二维码生成库：QRCode</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="WEB-INF/js/qrcode.js"></script>
</head>
<body>

<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

<script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width : 100,
        height : 100,
        correctLevel : QRCode.CorrectLevel.H
    });

    function makeCode () {
        var str ="http://www.baidu.com";
        qrcode.makeCode(str);
    }
    makeCode();
    
</script>
</body>
</html>

此时，发现url越长，二维码显示的越密集

当url为

https://blog.csdn.net/m0_37450089/article/details/86073550

时：

于是使用jquery新浪短链接短网址生成代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
    <title>Javascript 二维码生成库：QRCode</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="WEB-INF/js/qrcode.js"></script>
</head>
<body>

<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

<script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width : 100,
        height : 100,
        correctLevel : QRCode.CorrectLevel.H
    });

    function makeCode () {
        var str ="https://blog.csdn.net/m0_37450089/article/details/86073550";
        shortUrl(str);
    }
    makeCode();

    function shortUrl(long) {
        //请求访问短链接网址
        var url2 = "http://api.weibo.com/2/short_url/shorten.json";
        var app_key = "211160679";//app_key无效可能会导致无反应；
        var cmd2 = url2 + "?source=" + app_key + "&url_long=" + long;
        $.ajax({ //底层方法；
            url: cmd2,
            type: "GET",
            dataType: "jsonp", //使用JSONP方法进行AJAX,json有跨域问题；
            cache: false,
            success: function (data, status) {
                console.log(data)
                //   返回的短链接
                console.log(data.data.urls[0].url_short)
                var url = data.data.urls[0].url_short
                qrcode.makeCode(data.data.urls[0].url_short);
            },
            error: function(obj,info,errObj){
                alert("$.ajax()中发生错误：" + info);
            }
        });
    }
</script>
</body>
</html>

QRCode.js：js生成二维码

猜你喜欢