当前位置：首页 > jquery

jquery生成二维码

2026-02-03 20:06:12jquery

使用jQuery生成二维码的方法

引入必要的库

在HTML文件中引入jQuery和二维码生成库（如jquery.qrcode.js）。可以从CDN获取这些库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-qrcode@1.0.3/dist/jquery.qrcode.min.js"></script>

基本二维码生成

在页面加载完成后，使用jQuery选择目标元素并调用qrcode方法生成二维码：

jquery生成二维码

$(document).ready(function(){
    $('#qrcode').qrcode({
        text: "https://example.com",
        width: 128,
        height: 128
    });
});

自定义二维码选项

可以通过配置对象自定义二维码的各种属性：

jquery生成二维码

$('#qrcode').qrcode({
    text: "自定义内容",
    width: 200,
    height: 200,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: $.qrcode.correctLevel.H
});

动态生成二维码

结合表单输入实现动态二维码生成：

<input type="text" id="qrtext" placeholder="输入二维码内容">
<button id="generate">生成二维码</button>
<div id="qrcode"></div>

<script>
$('#generate').click(function(){
    $('#qrcode').empty().qrcode({
        text: $('#qrtext').val(),
        width: 150,
        height: 150
    });
});
</script>

高级功能实现

生成带LOGO的二维码需要额外处理：

$('#qrcode').qrcode({
    text: "带LOGO的二维码",
    render: "canvas",
    width: 200,
    height: 200,
    // 生成后添加LOGO
    callback: function(canvas){
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.onload = function(){
            ctx.drawImage(img, 70, 70, 60, 60);
        };
        img.src = "logo.png";
    }
});