JS實現將連結生成二維碼並轉為圖片的方法

NO IMAGE

本文例項講述了JS實現將連結生成二維碼並轉為圖片的方法。分享給大家供大家參考,具體如下:


<div id="code"></div>
<img id="img"/>
<script type="text/javascript">
var qrcode=$("#code").qrcode({
render:'canvas||table',
width: 200, //寬度
height:200, //高度
text: "http://www.baidu.com" //任意內容
}).hide();
var canvas=qrcode.find('canvas').get(0);
//如果有迴圈,此句必不可少 qrcode.find('canvas').remove();
var data = canvas.toDataURL('image/jpg');
$('#img').attr('src',data) ;
saveFile(data,"fd范德薩范德薩");
//轉為圖片的方法,需要上門的data
function saveFile(data,filename){
var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href=data;
save_link.download=filename;
var event=document.createEvent('MouseEvents');
event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
save_link.dispatchEvent(event);
};
</script>

注:這裡使用了qrcodejs外掛,github可參考https://github.com/davidshimjs/qrcodejs

PS:這裡再為大家推薦兩款二維碼相關線上工具供大家參考使用:

線上生成二維碼工具(加強版)
http://tools.jb51.net/transcoding/jb51qrcode

線上二維碼解碼識別工具
http://tools.jb51.net/transcoding/trans_qrcode

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題:《JavaScript圖片操作技巧大全》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結

希望本文所述對大家JavaScript程式設計有所幫助。

您可能感興趣的文章:

JavaScript動態生成二維碼圖片JavaScript生成二維碼圖片小結使用JS 外掛qrcode.js生成二維碼功能js基於qrcode.js生成二維碼的方法【附demo外掛原始碼下載】使用jquery.qrcode.js生成二維碼外掛QRCode.js:基於JQuery的生成二維碼JS庫的使用nodejs實現超簡單生成二維碼的方法JS生成和下載二維碼的程式碼Angular JS 生成動態二維碼的方法基於JavaScript實現生成名片、連結等二維碼