简单使用QRCode.js生成二维码

2023-06-20 15:17:47 浏览数 (2)

有用到,简单记录一下:

QRCode.js是一个JavaScript库,用于生成QR码。使用QRCode.js可以轻松地在网页中生成QR码,以便用户扫描并访问相关信息。

引入QRCode

这里使用的字节跳动的CDN

代码语言:javascript复制
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>

创建元素

用于显示生成的二维码

代码语言:javascript复制
  <!-- 用于显示二维码 -->
  <div id="qrcode"></div>

创建二维码

在js中使用QRCode生成一个二维码并将其显示到第一步创建的元素中

代码语言:javascript复制
  // 创建二维码 并显示到id为qrcode的元素中
  var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "https://www.example.com",
    width: 256,
    height: 256,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
  });

转为可保存图片

使用HTML5的canvas元素将QR码转换为图片,并将其保存为PNG格式 此时可以右键保存图片

代码语言:javascript复制
  var canvas = document.getElementById("qrcode").getElementsByTagName("canvas")[0];
  var img = canvas.toDataURL("image/png");

canvas下文详细写写...

0 人点赞