1、基于JQ插件jQuery.qrcode(网址:https://larsjung.de/jquery-qrcode/)。支持可以生成带logo的二维码,需要引入JQ,操作界面如下:
用法
语法非常简单。只是用
$(selector).qrcode(options);
将表示QR码的新生成的HTML元素附加到所选元素。如果所选元素已经是canvas
元素,则将QR码绘制到其上。
选项
可用选项及其默认值为:
{
// render method: 'canvas', 'image' or 'div'
render: 'canvas',
// version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,
// error correction level: 'L', 'M', 'Q' or 'H'
ecLevel: 'L',
// offset in pixel if drawn onto existing canvas
left: 0,
top: 0,
// size in pixel
size: 200,
// code color or image element
fill: '#000',
// background color or image element, null for transparent background
background: null,
// content
text: 'no text',
// corner radius relative to module width: 0.0 .. 0.5
radius: 0,
// quiet zone in modules
quiet: 0,
// modes
// 0: normal
// 1: label strip
// 2: label box
// 3: image strip
// 4: image box
mode: 0,
mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,
label: 'no label',
fontname: 'sans',
fontcolor: '#000',
image: null
}
2、基于qrcode.js插件,插件不大,而且无需引入JQ,字段少的时候,用这个生成二维码很合适。但是不能生成带logo的二维码。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="qrcode.js"></script>
<!--http://code.ciaoca.com/javascript/qrcode/-->
</head>
<body>
<div id="qrcode"></div>
<script>
//1、 简单方式
//new QRCode(document.getElementById('qrcode'), 'your content');
// 2、设置option
var option={
text:'http://www.baidu.com',
width:256, //图像宽度
height:256, //图像高度
typeNumber:4,//4
colorDark:"#000000", //前景色
colorLight:"#ffffff", //背景色
correctLevel:QRCode.CorrectLevel.L //容错级别,可设置为:
};
new QRCode('qrcode', option)
</script>
</body>
</html>
生成百度二维码示例: