jQuery 生成矢量svg二維碼，并提供PNG，和SVG的頁面下載，減輕服務端的壓力。
代碼如下所示：
<html> <head> <title>jQuery 生成svg矢量二維碼</title> </head> <body> <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script><script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script><script type='text/javascript' src='raphael.js'></script><script type='text/javascript' src='qrcodesvg.js'></script><p>二維碼信息：201211070014</p> <div id="qrcodeTable"></div> <p>二維碼信息：gerrard</p> <div id="qrcodeCanvas"></div> <p>二維碼信息：test</p> <div id="svg-wrap" class="svg-wrap"></div> <br><a id="a" href="javascript:saveAsPng()">下載PNG</a> <a id="a" href="javascript:saveAsSvg()">下載SVG</a><script> var qrcodesvg = new Qrcodesvg("http://www.baidu.com", "svg-wrap", 250);qrcodesvg.draw();// qrcodesvg.createSquare();/* //jQuery('#qrcode').qrcode("this plugin is great"); jQuery('#qrcodeTable').qrcode({ render : "table", text : "201211070014" //根據此串生成第一個二維碼 }); jQuery('#qrcodeCanvas').qrcode({ render : "canvas", text : "http://www.csdn.net" //根據此串生成第二個二維碼 }); */// 下載png圖片function saveAsPng () {var svgXml = $('.svg-wrap').html();var image = new Image();image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //給圖片對象寫入base64編碼的svg流// 把svg格式轉換成canvas格式var canvas = document.createElement('canvas'); //準備空畫布canvas.width = $('.svg-wrap svg').width();canvas.height = $('.svg-wrap svg').height();var context = canvas.getContext('2d'); //取得畫布的2d繪圖上下文context.drawImage(image, 0, 0);var a = document.createElement('a');a.href = canvas.toDataURL('image/png'); //將畫布內的信息導出為png圖片數據a.download = mathRand(); //設定下載名稱a.click(); //點擊觸發下載 }// 下載svg圖片function saveAsSvg () {var svgXml = $('.svg-wrap').html();var image = new Image();image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //給圖片對象寫入base64編碼的svg流var a = document.createElement('a');a.href = image.src; //直接導出SVGa.download = mathRand(); //設定下載名稱a.click(); //點擊觸發下載 }// 隨機生成數字function mathRand() { var num = ""; for(var i = 0 ; i < 6 ; i ++) { num+=Math.floor(Math.random()*10); } return num ;}</script> </body> </html>以上所述是小編給大家介紹的jQuery 生成svg矢量二維碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
