第一步:
引入:<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 的瀏覽器下有效) |