QRCode.js：基于JQuery的生成二维码JS库的使用

下面是使用QRCode.js生成二维码的详细攻略：

准备工作

在使用QRCode.js之前，需要先引入jQuery库和QRCode.js库文件：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/qrcodejs/1.0.0/qrcode.min.js"></script>

基础用法

使用QRCode.js生成二维码的基础用法非常简单，只需要在HTML中添加一个容器元素，然后在JS中实例化QRCode对象即可。示例代码如下：

<!-- 容器元素 -->
<div id="qrcode"></div>

<!-- JS代码 -->
<script>
    // 实例化QRCode对象
    var qrcode = new QRCode('qrcode', {
        text: 'www.baidu.com', // 二维码内容
        width: 200, // 二维码宽度
        height: 200, // 二维码高度
    });
</script>

在上面的代码中，我们使用new QRCode实例化了一个QRCode对象，并指定了容器元素的id为qrcode。在实例化时，我们还传入了相关的参数，包括二维码内容、宽度和高度。

进阶用法

除了基础用法以外，QRCode.js还提供了一些进阶用法，比如可以更灵活地定制二维码的样式，甚至可以在二维码中嵌入logo图标等功能。下面是两个使用示例：

示例1：自定义二维码样式

我们可以通过QRCode.js提供的canvas配置项来更灵活地定制二维码的样式，比如修改二维码的颜色、背景颜色、边框大小等。示例代码如下：

<!-- 容器元素 -->
<div id="qrcode"></div>

<!-- JS代码 -->
<script>
    // 实例化QRCode对象
    var qrcode = new QRCode('qrcode', {
        text: 'www.baidu.com', // 二维码内容
        width: 200, // 二维码宽度
        height: 200, // 二维码高度
        colorDark: '#00f', // 二维码颜色
        colorLight: '#fff', // 二维码背景颜色
        correctLevel: QRCode.CorrectLevel.L // 二维码容错级别，可选值L、M、Q、H，级别越高纠错能力越强，但生成的二维码越复杂
    });
</script>

在上面的代码中，我们通过传入colorDark和colorLight两个配置项，分别指定了二维码和背景颜色。此外，我们还可以通过correctLevel配置项指定二维码的容错级别。

示例2：在二维码中嵌入logo图标

我们可以通过在二维码中绘制Image对象实现在二维码中嵌入logo图标的功能。示例代码如下：

<!-- 容器元素 -->
<div id="qrcode"></div>

<!-- JS代码 -->
<script>
    // 实例化QRCode对象
    var qrcode = new QRCode('qrcode', {
        text: 'www.baidu.com', // 二维码内容
        width: 200, // 二维码宽度
        height: 200, // 二维码高度
    });

    // 创建Image对象
    var img = new Image();
    img.src = 'logo.png';
    img.onload = function () {
        // 在二维码中绘制logo图标
        var canvas = $('#qrcode canvas')[0];
        var ctx = canvas.getContext('2d');
        var logoWidth = qrcode._oWidth * 0.2;
        var logoHeight = qrcode._oWidth * 0.2;
        var logoX = (qrcode._oWidth - logoWidth) / 2;
        var logoY = (qrcode._oWidth - logoHeight) / 2;
        ctx.drawImage(img, logoX, logoY, logoWidth, logoHeight);
    }
</script>

在上面的代码中，我们首先创建了一个Image对象，指定了logo图标的路径，并在图片加载完成后绘制到二维码上。具体实现过程是通过获取二维码生成的canvas元素，然后在其上绘制Image对象。在绘制时，我们还可以通过位置和大小调整logo图标的位置和大小。