JS实现动态生成二维码，并在中间插入logo

青年码农i

已于 2022-04-04 18:55:23 修改

阅读量3.9k

点赞数

分类专栏：前端插件使用文章标签： javascript html css

于 2021-10-30 16:28:12 首次发布

本文链接：https://blog.csdn.net/weixin_46738628/article/details/121052670

版权

前端插件使用专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用qrcode.js库在网页中生成二维码，并且展示了如何将自定义LOGO集成到二维码中。通过设置CSS样式和JavaScript代码，实现了二维码的尺寸、颜色等自定义，同时保持LOGO在二维码中央对齐。

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

引用qrcode.js

Github地址：GitHub - davidshimjs/qrcodejs: Cross-browser QRCode generator for javascript

css:

 #qrcode {
    position: relative;
 }
 #qrCodeIco {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    background-color: #fff;
    padding: 2px;
    border-radius: 5px;
 }
 #qrCodeImg {
    width: 100%;
    height: 100%;
 }

html:

<div id="qrcode">

</div>

js：

function getUrl() {
  var url = https://baidu.com
  var qrDiv = document.getElementById('qrcode');
  //创建图片，插入id为qrcode的div元素中
  var div = document.createElement('div');
  div.id = 'qrCodeIco';
  var img = document.createElement('img');
  img.id = 'qrCodeImg';
  img.src = './images/logo.png';
  //将img插入到div
  div.appendChild(img);
  qrDiv.appendChild(div);
  makeCode(result.data.url);
  //创建二维码模块
  var qr = document.createElement('div');
  qr.id = 'qrcode'
  //控制logo图标的位置
  var margin = ($("#qrcode").height() - $("#qrCodeIco").height()) / 2;
  $("#qrCodeIco").css("top", margin);
  $("#qrCodeIco").css("left", margin);
}
// 生成二维码
function makeCode(url) {
  $("#qrcode").qrcode({
    render: "canvas",
    text: url,
    width: "163",               //二维码的宽度
    height: "163",              //二维码的高度
    background: "#fff",       //二维码的后景色
    foreground: "#000"        //二维码的前景色
  });
}