1.首先要引用jquery.js组件,然后要引用生成二维码的jqrcode.js组件;
2.直接写二维码的内容以及logo图片路径
下面是demo供大家参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<script src="jqrcode.min.js"></script>
</head>
<style>
.box {
width: 200px;
height: 200px;
margin: auto;
}
</style>
<body>
<div class="box"></div>
</body>
<script>
$('.box').qrcode({
text: "www.baidu.com",
logo: 'logo2.png' //这里配置Logo的地址即可。
});
</script>
</html>
这是出来的
下面是jqrocde.js代码,大家可以直接拿来用:
function utf16to8(str) {
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
function QR8bitByte(a) {
this.mode = QRMode.MODE_8BIT_BYTE, this.data = a
}
function QRCode(a, b) {
this.typeNumber = a, this.errorCorrectLevel = b, this.modules = null, this.moduleCount = 0, this.dataCache = null, this.dataList = new Array()
}
function QRPolynomial(a, b) {
var c, d;
if (void 0 == a.length) {
throw new Error(a.length + "/" + b)
}
for (c = 0; c < a.length && 0 == a[c];) {
c++
}
for (this.num = new Array(a.length - c + b), d = 0; d < a.length - c; d++) {
this.num[d] = a[d + c]
}
}
function QRRSBlock(a, b) {
this.totalCount = a, this.dataCount = b
}
function QRBitBuffer() {
this.buffer = new Array(), this.length = 0
}
var QRMode, QRErrorCorrectLevel, QRMaskPattern, QRUtil, QRMath, i;
for (function(a) {
a.fn.qrcode = function(b) {
var c, d;
return "string" == typeof b && (b = {
text: b
}), b = a.extend({
}, {
render: "canvas",
width: 256,
height: 256,
imgWidth: b.width / 4.5,
imgHeight: b.height / 4.5,
typeNumber: -1,
correctLevel: QRErrorCorrectLevel.H,
background: "#ffffff",
foreground: "#000000"
}, b), b.text = utf16to8(b.text), c = function() {
var c, d, e, f, g, h, i, j, k, a = new QRCode(b.typeNumber, b.correctLevel);
for (a.addData(b.text), a.make(), c = document.createElement("canvas"), c.width = b.width, c.height = b.height, d = c.getContext("2d"), b.logo && (e = new Image(), e.src = b.logo, e.onload = function() {
if (isNaN(b.imgWidth)) {
b.imgWidth = b.width / 4.5;
}
if (isNaN(b.imgHeight)) {
b.imgHeight = b.height / 4.5;
}
var x = (b.width - b.imgWidth) / 2,
y = (b.height - b.imgHeight) / 2,
w = b.imgWidth,
h = b.imgHeight,
r = 0.5;
if (w < 2 * r) r = w / 2;
if (h < 2 * r) r = h / 2;
d.fillStyle = "#fff";
d.fillRect(x, y, w, h);
d.lineWidth = 13;
d.strokeStyle = "#fff";
d.beginPath();
d.moveTo(x + r, y);
d.arcTo(x + w, y, x + w, y + h, r);
d.arcTo(x + w, y + h, x, y + h, r);
d.arcTo(x, y + h, x, y, r);
d.arcTo(x, y, x + w, y, r);
d.closePath();
d.stroke();
d.drawImage(e, (b.width - b.imgWidth) / 2, (b.height - b.imgHeight) / 2, b.imgWidth, b.imgHeight)
}), f = b.width / a.getModuleCount(), g = b.height / a.getModuleCount(), h = 0; h < a.getModuleCount(); h++) {
for (i = 0; i < a.getModuleCount(); i++) {
d.fillStyle = a.isDark(h, i) ? b.foreground : b.background, j = Math.ceil((i + 1) * f) - Math.floor(i * f), k = Math.ceil((h + 1) * f) - Math.floor(h * f), d.fillRect(Math.round(i * f), Math.round(h * g), j, k)
}
}
return c
}, d = function() {
var d, e, f, g, h, i, c = new QRCode(b.typeNumber, b.correctLevel);
for (c.addData(b.text), c.make(), d = a("<table></table>").css("width", b.width + "px").css("height", b.height + "px").css("border", "0px").css("border-collapse", "collapse").css("background-color", b.background), e = b.width / c.getModuleCount(), f = b.height / c.getModuleCount(), g = 0; g < c.getModuleCount(); g++) {
for (h = a("<tr></tr>").css("height", f + "px").appendTo(d), i = 0; i < c.getModuleCount(); i++) {
a("<td></td>").css("width", e + "px").css("background-color", c.isDark(g, i) ? b.foreground : b.background).appendTo(h)
}
}
return d
}, this.each(function() {
var e = "canvas" == b.render ? c() : d();
a(e).appendTo(this)
})
}
}(jQuery), QR8bitByte.prototype = {
getLength: function() {
return this.data.length
},
write: function(a) {
for (var b = 0; b < this.data.length; b++) {
a.put(this.data.charCodeAt(b), 8)
}
}
}, QRCode.prototype = {
addData: function(a) {
var b = new QR8bitByte(a);
this.dataList.push(b), this.dataCache = null
},
isDark: function(a, b) {
if (0 > a || this.moduleCount <= a || 0 > b || this.moduleCount <= b) {
throw new Error(a + "," + b)
}
return this.modules[a][b]
},
getModuleCount: function() {
return this.moduleCount
},
make: function() {
var a, b, c, d, e, f;
if (this.typeNumber < 1) {
for (a = 1, a = 1; 40 > a; a++) {
for (b = QRRSBlock.getRSBlocks(a, this.errorCorrectLevel), c = new QRBitBuffer(), d = 0, e = 0; e < b.length; e++) {
d += b[e].dataCount
}
for (e = 0; e < this.dataList.length; e++) {
f = this.dataList[e], c.put(f.mode, 4), c.put(f.getLength(), QRUtil.getLengthInBits(f.mode, a)), f.write(c)
}
if (c.getLengthInBits() <= 8 * d) {
break
}
}
this.typeNumber = a
}
this.makeImpl(!1, this.getBestMaskPattern())
},
makeImpl: function(a, b) {
var c, d;
for (this.moduleCount