一、引入
- qrcode.js获取:二维码插件
<script src="jquery.min.js"></script>
<script src="qrcode.js"></script>
二、使用
- HTML结构
<!--logo图片(不用logo图片,可以不要)-->
<img id="imgLogo" src="img/logo.png" style="display:none">
<!--二维码容器-->
<div id="qrcode1"></div>
<div id="qrcode1"></div>
- 初始化
//文字logo
$("#qrcode1").erweima({
label: 'jQuery',
fill:'#ac8ae7' ,//码的颜色
background: "#fdfbff",//背景颜色
minVersion:6,
text:'https://www.baidu.com',
});
//图片logo
$('#qrcode2').erweima({
mode: 4,
mSize:20,
image: $("#imgLogo")[0],
text:'https://www.baidu.com'
});
三、参数
render:canvas / image / div 渲染模式,默认是canvas
ecLevel:L:7% / M:15% / Q:25% / H:30% 二维码识别度(越大越容易扫描)
-----------------------------------------------------------------------------------
minVersion:6 二维码密度,推荐0-10
fill:'#666' 二维码颜色
background:'#fff' 二维码背景颜色
text:'www.baidu.com' 最后扫出来的结果
size:300 二维码大小
radius:50 点圆滑度,50以内
quiet:4 二维码边框
------------------------------------------------------------------------------------
mode:2 不显示LOGO:0 / 文字且占整行:1 / 文字居中:2 / 图片且占整行:3 / 图片居中:4
mSize:20 logo大小
mPosX:50 logo水平坐标,50居中
mPosY:50 logo垂直坐标,50居中
label:'扫码关注我' logo文字
fontname:'微软雅黑' logo字体名
fontcolor:'orange' logo字体颜色
image:image:$("#imgLogo")[0] 设置的时候,需要把mode改成4,调用整个图片控件