首頁 > 開發者 > JavaScript
jQuery 產生svg向量二維碼，jquerysvg向量
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向量二維碼,希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
