jQuery 生成svg矢量二维码
jQuery生成矢量svg二维码,并提供PNG,和SVG的页面下载,减轻服务端的压力。
代码如下所示:
<html> <head> <title>jQuery生成svg矢量二维码</title> </head> <body> <scripttype='text/javascript'src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script> <scripttype="text/javascript"src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> <scripttype='text/javascript'src='raphael.js'></script> <scripttype='text/javascript'src='qrcodesvg.js'></script> <p>二维码信息:201211070014</p> <divid="qrcodeTable"></div> <p>二维码信息:gerrard</p> <divid="qrcodeCanvas"></div> <p>二维码信息:test</p> <divid="svg-wrap"class="svg-wrap"></div> <br> <aid="a"href="javascript:saveAsPng()">下载PNG</a> <aid="a"href="javascript:saveAsSvg()">下载SVG</a> <script> varqrcodesvg=newQrcodesvg("http://www.baidu.com","svg-wrap",250); qrcodesvg.draw(); //qrcodesvg.createSquare(); /*//jQuery('#qrcode').qrcode("thispluginisgreat"); jQuery('#qrcodeTable').qrcode({ render:"table", text:"201211070014"//根据此串生成第一个二维码 }); jQuery('#qrcodeCanvas').qrcode({ render:"canvas", text:"http://www.csdn.net"//根据此串生成第二个二维码 }); */ //下载png图片 functionsaveAsPng(){ varsvgXml=$('.svg-wrap').html(); varimage=newImage(); image.src='data:image/svg+xml;base64,'+window.btoa(unescape(encodeURIComponent(svgXml)));//给图片对象写入base64编码的svg流 //把svg格式转换成canvas格式 varcanvas=document.createElement('canvas');//准备空画布 canvas.width=$('.svg-wrapsvg').width(); canvas.height=$('.svg-wrapsvg').height(); varcontext=canvas.getContext('2d');//取得画布的2d绘图上下文 context.drawImage(image,0,0); vara=document.createElement('a'); a.href=canvas.toDataURL('image/png');//将画布内的信息导出为png图片数据 a.download=mathRand();//设定下载名称 a.click();//点击触发下载 } //下载svg图片 functionsaveAsSvg(){ varsvgXml=$('.svg-wrap').html(); varimage=newImage(); image.src='data:image/svg+xml;base64,'+window.btoa(unescape(encodeURIComponent(svgXml)));//给图片对象写入base64编码的svg流 vara=document.createElement('a'); a.href=image.src;//直接导出SVG a.download=mathRand();//设定下载名称 a.click();//点击触发下载 } //随机生成数字 functionmathRand(){ varnum=""; for(vari=0;i<6;i++){ num+=Math.floor(Math.random()*10); } returnnum; } </script> </body> </html>
以上所述是小编给大家介绍的jQuery生成svg矢量二维码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!