如何在前端生成二维码

风流意气都作罢 提交于 2020-04-03 22:06:04

 第一步:

引入:<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 的浏览器下有效)

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!