快捷導(dǎo)航

jQuery 生成svg矢量二維碼

更新時(shí)間：2016年08月09日 10:35:26 投稿：mrr

這篇文章主要介紹了jQuery 生成svg矢量二維碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

jQuery 生成矢量svg二維碼，并提供PNG，和SVG的頁(yè)面下載，減輕服務(wù)端的壓力。

代碼如下所示：

<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" //根據(jù)此串生成第一個(gè)二維碼 
}); 
jQuery('#qrcodeCanvas').qrcode({ 
render : "canvas", 
text : "http://www.csdn.net" //根據(jù)此串生成第二個(gè)二維碼 
}); 
*/
// 下載png圖片
function saveAsPng () {
var svgXml = $('.svg-wrap').html();
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //給圖片對(duì)象寫入base64編碼的svg流
// 把svg格式轉(zhuǎn)換成canvas格式
var canvas = document.createElement('canvas'); //準(zhǔn)備空畫(huà)布
canvas.width = $('.svg-wrap svg').width();
canvas.height = $('.svg-wrap svg').height();
var context = canvas.getContext('2d'); //取得畫(huà)布的2d繪圖上下文
context.drawImage(image, 0, 0);
var a = document.createElement('a');
a.href = canvas.toDataURL('image/png'); //將畫(huà)布內(nèi)的信息導(dǎo)出為png圖片數(shù)據(jù)
a.download = mathRand(); //設(shè)定下載名稱
a.click(); //點(diǎn)擊觸發(fā)下載 
}
// 下載svg圖片
function saveAsSvg () {
var svgXml = $('.svg-wrap').html();
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //給圖片對(duì)象寫入base64編碼的svg流
var a = document.createElement('a');
a.href = image.src; //直接導(dǎo)出SVG
a.download = mathRand(); //設(shè)定下載名稱
a.click(); //點(diǎn)擊觸發(fā)下載 
}
// 隨機(jī)生成數(shù)字
function mathRand() { 
var num = ""; 
for(var i = 0 ; i < 6 ; i ++) { 
num+=Math.floor(Math.random()*10); 
} 
return num ;
}
</script> 
</body> 
</html>

以上所述是小編給大家介紹的jQuery 生成svg矢量二維碼,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: