jquery-qrcode包生成带logo的二维码 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>11123</title>
    <script src="./jquery.min.js"></script>
    <script src="./jquery-qrcode-0.18.0.js"></script>
    <style>
      #app {
        width: 400px;
        height: 400px;
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const img = new Image();
      img.onload = () => {
        const options = {
          // 渲染成  canvas/div/image
          render: "canvas",

          // 控制 黑白块的密度(作用未知)
          minVersion: 10,
          maxVersion: 40,

          // 容错级别 L:最高 : 'L', 'M', 'Q' or 'H'
          ecLevel: "L",

          // offset in pixel if drawn onto existing canvas
          left: 0,
          top: 0,

          // 二维码的宽度和高度 单位 px
          size: 400,

          // 二维码 深颜色(比如说黑白二维码的黑色)
          fill: "#000",

          // background color or image element, null for transparent background
          background: null,

          // content
          text: "xxxxxx/charge/all_qr?qr=2022030001",

          // 单个色块的倒角, 最多50%, 即0.5
          radius: 0,

          // 二维码相对于 canvas 是否保存间距
          quiet: 1,

          // modes
          // 0: normal
          // 文本渲染, 且两边空白 需要指定 LABEL 参数
          // 1: label strip
          // 文本渲染, 两边是 黑白块
          // 2: label box
          // 3: image strip
          // 4: image box
          mode: 4,

          // 图片大小占比 大于20% 之后就无法扫描了
          mSize: 0.2,
          // 图片定位
          mPosX: 0.5,
          mPosY: 0.5,

          label: "no label",
          // 文字名字
          fontname: "sans",
          // 文案颜色
          fontcolor: "#000",
          // 图片
          image: img,
        };
        $("#app").qrcode(options);
      };
      img.src = "./掌蜗生活logo.png";
    </script>
  </body>
</html>

 

posted @ 2022-03-16 14:58  深海里的星星i  阅读(523)  评论(0)    收藏  举报