胖蔡说技术
随便扯扯

JS实现二维码生成

二维码也是比较常用的一个工具了,通过二维码我们可以实现网页内容的推广、分享,以及实现用户信息的校验认证,今天这篇文章主要介绍前端如何申城二维码的。若是希望可以直接在线生成二维码,推荐可以访问:在线二维码生成器,快速生成你的二维码图片。

我们可以采用现有的生成库来生成二维码,本文以 qrcode.min.jsawesome-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文件,可以通过设置imgsrc地址实现二维码的加载。支持设置参数:

  • 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);
            });
        }

赞(2) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » JS实现二维码生成
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏