JS實(shí)現(xiàn)將鏈接生成二維碼并轉(zhuǎn)為圖片的方法
本文實(shí)例講述了JS實(shí)現(xiàn)將鏈接生成二維碼并轉(zhuǎn)為圖片的方法。分享給大家供大家參考，具體如下：
<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" //任意內(nèi)容
}).hide();
var canvas=qrcode.find('canvas').get(0);
//如果有循環(huán),此句必不可少 qrcode.find('canvas').remove();
var data = canvas.toDataURL('image/jpg');
$('#img').attr('src',data) ;
saveFile(data,"fd范德薩范德薩");
//轉(zhuǎn)為圖片的方法,需要上門(mén)的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：這里再為大家推薦兩款二維碼相關(guān)在線工具供大家參考使用：
在線生成二維碼工具(加強(qiáng)版)
http://tools.jb51.net/transcoding/jb51qrcode
在線二維碼解碼識(shí)別工具
http://tools.jb51.net/transcoding/trans_qrcode
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
網(wǎng)頁(yè)中可關(guān)閉的漂浮窗口實(shí)現(xiàn)可自行調(diào)節(jié)
廣告式的漂浮窗口，想必大家并不陌生吧，下面為大家簡(jiǎn)單介紹下具體的實(shí)現(xiàn)，有需要的朋友可以參考下2013-08-08
window.parent調(diào)用父框架時(shí) ie跟火狐不兼容問(wèn)題
window.parent調(diào)用父框架時(shí)，ie跟火狐不兼容問(wèn)題！2009-07-07
JavaScript+node實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript+node實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
遨游，飛飛，IE，空中網(wǎng) 瀏覽器無(wú)提示關(guān)閉方法
遨游，飛飛，IE，空中網(wǎng) 瀏覽器無(wú)提示關(guān)閉方法,需要的朋友可以參考下。2011-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序日期時(shí)分組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
js 連接數(shù)據(jù)庫(kù)如何操作數(shù)據(jù)庫(kù)中的數(shù)據(jù)
JS中怎么連接數(shù)據(jù)庫(kù),和提取數(shù)據(jù)庫(kù)中的數(shù)據(jù),本文將以此問(wèn)題詳細(xì)介紹，需要的朋友可以了解下2012-11-11
微信小程序?qū)崿F(xiàn)頁(yè)面分享onShareAppMessage
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁(yè)面分享onShareAppMessage，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
bind函數(shù)，顧名思義，用于為調(diào)用函數(shù)綁定一個(gè)作用域，因?yàn)閠his很容易跟丟它原來(lái)所在的作用域，直接指向頂層的window對(duì)象。2010-01-01
Bootstrap告警框（alert）實(shí)現(xiàn)彈出效果和短暫顯示后上浮消失的示例代碼
這篇文章主要介紹了Bootstrap告警框（alert）實(shí)現(xiàn)彈出效果和短暫顯示后上浮消失，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08