jquery.qrcode.min.js生成二维码生成白边的简单解决方法

liuhuangming

已于 2024-02-05 20:26:35 修改

阅读量1.1k

点赞数 11

CC 4.0 BY-SA版权

文章标签： javascript jquery 前端

于 2024-02-05 20:18:55 首次发布

本文链接：https://blog.youkuaiyun.com/liuhuangming/article/details/136047389

本文介绍了如何使用jQuery.qrcode.min.js生成的二维码去除非美观的白边，通过创建新canvas元素，添加边框并重绘原始二维码内容，实现无白边效果，最后提供图片格式转换的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery.qrcode.min.js生成的二维码没有白边，巨丑。网上找了一圈解决方案，全部不靠谱，最终自己几行代码搞定了，供大家参考。

    $(ele).empty();
    //中文格式转换
    var str = toUtf8(txt);
    //生成二维码
    $(ele).qrcode({
      render: "canvas", //canvas和table两种渲染方式
      width: width,
      height: height,
      text: str,
    });
    var canvas = $(ele).find("canvas").get(0);
    
    // 创建新的canvas元素
    var newCanvas = document.createElement('canvas');
    var borderSize = 15; // 边框大小
    newCanvas.width = canvas.width + borderSize * 2; // 增加左右边框
    newCanvas.height = canvas.height + borderSize * 2; // 增加上下边框
    
    var context = newCanvas.getContext('2d');
    
    // 绘制白色背景
    context.fillStyle = '#FFFFFF';
    context.fillRect(0, 0, newCanvas.width, newCanvas.height);
    
    // 在白色背景上绘制原始canvas的内容
    context.drawImage(canvas, borderSize, borderSize);
    
    // 将新的canvas转换为DataURL
    var dataURL = newCanvas.toDataURL("image/png");

总结：核心就是canva重绘，重新绘制带有边框的canva。我的输出的图片格式，大家根据自己的需求场景决定是不是要图片格式。