如何在前端生成二維碼


 第一步:

引入:<script src="qrcode.js"></script>

第二步:

<div id="qrcode"></div>

第三步:

// 1.簡單使用方式 :new QRCode(document.getElementById('qrcode'), 'http://www.baidu.com');

// 2.設置參數使用方式: var qrcode = new QRCode('qrcode',     //document.getElementById('#qrcode');

{ text: 'http://www.baidu.com',

width: 256, height: 256,

colorDark : '#000000',

colorLight : '#ffffff',

correctLevel : QRCode.CorrectLevel.H

});

 

// 3使用 API

qrcode.clear();

qrcode.makeCode('new content');

總結:參數說明:

new QRCode(element, option)

element-顯示二維碼的元素或該元素的 ID

option參數配置

width256圖像寬度height256圖像高度typeNumber4colorDark"#000000"前景色colorLight"#ffffff"背景色

correctLevelQRCode.CorrectLevel.L容錯級別,可設置為:

QRCode.CorrectLevel.L

QRCode.CorrectLevel.M

QRCode.CorrectLevel.Q

QRCode.CorrectLevel.H

API 接口

名稱 說明
makeCode(text) 設置二維碼內容
clear() 清除二維碼。(僅在不支持 Canvas 的瀏覽器下有效)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM