Posted in Javascript onAugust 09, 2016
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; //直接导出SVG
a.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矢量二维码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
jQuery 生成svg矢量二维码
- Author -
mrr声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@