QRCode.js：js生成二维码

柔情只为你懂 2022-03-29 10:53 257阅读 0赞

[http://www.runoob.com/w3cnote/javascript-qrcodejs-library.html][http_www.runoob.com_w3cnote_javascript-qrcodejs-library.html]

参考菜鸟教程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDUwMDg5_size_16_color_FFFFFF_t_70][]

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

当url为

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

时：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDUwMDg5_size_16_color_FFFFFF_t_70 1][]

于是使用[jquery新浪短链接 短网址生成代码][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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDUwMDg5_size_16_color_FFFFFF_t_70 2][]

[http_www.runoob.com_w3cnote_javascript-qrcodejs-library.html]: http://www.runoob.com/w3cnote/javascript-qrcodejs-library.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDUwMDg5_size_16_color_FFFFFF_t_70]: /images/20220329/400e9e7a40804e0095ec716f791471cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDUwMDg5_size_16_color_FFFFFF_t_70 1]: /images/20220329/a56e8253e47f444fa9df0581c2c90bf3.png
[jquery_]: https://isy.iteye.com/blog/2047534
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NDUwMDg5_size_16_color_FFFFFF_t_70 2]: /images/20220329/04646ef2ba314b168e045cbb80cdb318.png