如何动态生成带logo图片的二维码

最新推荐文章于 2024-03-03 18:35:16 发布

weixin_44883460

最新推荐文章于 2024-03-03 18:35:16 发布

阅读量284

点赞数 1

文章标签：二维码

本文链接：https://blog.csdn.net/weixin_44883460/article/details/101014996

版权

本文介绍了如何结合jQuery和jqrcode.js插件动态生成含有Logo的二维码。首先需要引入jQuery和jqrcode.js库，然后指定二维码内容和Logo图片路径。提供了一个可供参考的demo和jqrcode.js代码示例。

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

weixin_44883460

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何动态生成带logo图片的二维码

1.首先要引用jquery.js组件，然后要引用生成二维码的jqrcode.js组件；2.直接写二维码的内容以及logo图片路径下面是demo供大家参考<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...
复制链接

扫一扫