vue中使用qrcodejs2生成二维码

E和弦的根音 · 2020-08-23 · 2570 次浏览

首先安装 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生成海报

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎评论,对作者也是一种鼓励。
查看评论 - 1 条评论