jQuery qrcode插件Mode 3模式失效求助：无法添加二维码中心图片

嘿，我来帮你一步步定位这个问题——你想给二维码加中心logo，但Mode 3模式没生效对吧？结合你的代码，我整理了几个最可能的原因和排查方案：

1. 先确认插件版本是否支持Mode 3 #

不是所有版本的jQuery QRCode插件都支持Mode 3这个参数哦！有些早期版本的图片叠加功能用的是别的参数（比如直接用image而不是mode+src的组合）。先去检查你用的插件文档，确认当前版本是否支持Mode 3，有没有参数名称的变更。

2. 参数配置可能超出取值范围 #

看你设置的mSize:11、mPosX:5、mPosY:0.5，这里大概率有问题：

• mSize的有效值一般是0到1之间的小数，代表图片尺寸占二维码的比例（比如0.2就是20%大小），你设成11会让图片大到离谱，插件可能直接忽略这个模式；
• mPosX和mPosY同样是0-1的比例值，用来控制图片的相对位置，设成5的话图片会跑到二维码外面去，自然看不到效果。

建议改成合理的比例值测试，比如居中显示+20%大小的配置：

mSize: 0.2,
mPosX: 0.5,
mPosY: 0.5

3. DOM操作的时序或方式有问题 #

你用removeChild(can)移除旧canvas，但可能存在DOM未更新完成插件就开始渲染的情况，或者容器状态残留异常。可以换成更稳妥的清空方式：

// 替换原来的removeChild代码
$(".qrcodeOut").empty();

确保容器完全干净后再生成新二维码。

4. 图片路径错误导致加载失败 #

如果pin.jpg的路径不对，图片加载失败，插件会静默跳过Mode 3的渲染，直接生成普通二维码。你可以：

• 打开浏览器控制台的「网络」标签，查看pin.jpg的请求状态，确认是否成功加载；
• 换成绝对路径（比如./pin.jpg或者完整的相对路径），避免路径解析错误。

5. Canvas渲染模式的兼容性bug #

有些版本的插件在render: 'canvas'模式下对Mode 3的支持有问题，你可以临时换成render: 'table'测试：

render: 'table'

如果换成table模式后能显示图片，说明是canvas模式的bug，要么换插件版本，要么继续用table模式（或者自己手动在canvas上叠加图片）。

给你一个调整后的完整示例代码参考：

// 清空容器
$(".qrcodeOut").empty();
// 生成带中心图片的二维码
$(".qrcodeOut").qrcode({ 
    render: 'canvas', 
    size: 300, 
    fill: fill, 
    text: textValue, 
    background: backColor, 
    mode: 3, 
    mSize: 0.2,
    mPosX: 0.5,
    mPosY: 0.5,
    src: './pin.jpg'
});

内容的提问来源于stack exchange，提问作者Said Abdulsalam