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