jQuery 生成svg矢量二维码

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矢量二维码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！