vue中使用qrcodejs2生成二维码

首先安装 qrcodejs2 浏览器兼容等更多细节详见 qrcodejs2

npm install --save qrcodejs2

页面引入

import QRCode from "qrcodejs2"; 

编辑二维码容器

<div class="code" id="qrcode"></div>

生成二维码

      let qrcode = new QRCode("qrcode", {
        width: 300,
        height: 300, // 高度
        text: "www.baidu.com", // 二维码内容
        render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        background: "#f0f", // 背景色
        foreground: "#ff0" // 前景色
      });

转为base64, 下面的代码适用于render为canvas的情况 使用canvas的toDataURL方法

let canvas = document.getElementById("qrcode").getElementsByTagName("canvas");
let codeUrl = canvas[0].toDataURL("image/png");

使用html2canvas转为base64 这个没有局限性 适用于生成中间带头像的二维码 类似于微信的好友二维码html2canvas使用方法详见文章vue中使用html2canvas生成海报