QRCode.js:js生成二維碼
阿新 • • 發佈:2019-01-12
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
時:
<!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>