JS实现二维码生成

小半 • 2024年2月29日下午3:25 • 前端开发 • 阅读 309

二维码也是比较常用的一个工具了，通过二维码我们可以实现网页内容的推广、分享，以及实现用户信息的校验认证，今天这篇文章主要介绍前端如何申城二维码的。

我们可以采用现有的生成库来生成二维码，本文以 qrcode.min.js和awesome-qr.js来介绍二维码的生成。

qrcode.min.js

qrcode.min.js可以指定将需要生成的二维码加载到对应的元素上，其支持功能如下：

width：二维码宽度
height：二维码高度
colorDark：二维码颜色
colorLight：二维码前景色
correctLevel：二维码精度
text：需要生成二维码的文本

/**
 * 生成二维码
 * @param {*} text
 */
function createQrCode(text) {
  const elements = document.getElementsByClassName('qrcode');
  const len = elements.length;
  if (len) {
    for (let i = 0; i < len; i++) {
      const ele = elements[i];
      new QRCode(ele, {
        width: 101,
        height: 101,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
        text,
      });
    }
  }
}

awesome-qr.js

awesome-qr.js可以实现指定的文本生成对应的二维码base64文件，可以通过设置img的src地址实现二维码的加载。支持设置参数：

text：字符串文本
size：二维码大小
margin：二维码白边
colorDark：二维码颜色，默认黑色
colorLight：二维码亮色
backgroundImage：二维码背景色
logoImage：二维码中间icon
logoScale：二维码中间logo的scale大小
logoCornerRadius：二维码logo的圆角大小

createQrCode = function({ text, logo, bgColor, codeColor, margin }) {
          // 二维码生成参数
          var text = text;
          var size = 256;
          var colorDark = codeColor || "#000000";
          var background = bgColor || "#ffffff";
          var logo = logo || "";
          $("#qrcodeimg").css({ width: size + "px", height: size + "px" })
          new AwesomeQR.AwesomeQR({
            text: text, // 内容
            size: size, // 二维码大小
            margin: margin || 9, // 二维码白边大小
            colorDark: colorDark, // 二维码颜色
            colorLight: background, // 二维码颜色
            logoImage: logo, // 二维码中间logo
            logoScale: 0.3, // 二维码中间logo大小
            logoCornerRadius: 0, // 二维码中间logo圆角
          }).draw()
            .then((dataURL) => {
              $("#qrcode").attr("src", dataURL); // 通过设置img的src来加载二维码图片
            })
            .catch((err) => {
              console.error(err);
            });
        }