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

引用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"        //二维码的前景色
  });
}