526互联

二维码qrcode插件

发布时间 2023-06-12 10:41:04作者: 李云蹊

一.安装

npm install --save qrcode

二.canvas绘制

import QRCode from "qrcode";
//选择二维码添加的元素
const child = this.$el.querySelector(".child");
QRCode.toCanvas(value, options, (error, canvas) => {
  if (error) {
    throw error;
  }
  child.appendChild(canvas);
});

三.图片格式

import QRCode from "qrcode";
//选择二维码添加的元素（img标签）
const child = this.$el.querySelector(".child");
QRCode.toDataURL(value, options, (error, url) => {
  if (error) {
    throw error;
  }
  child.src = url;
});

四.svg格式

import QRCode from "qrcode";
//选择二维码添加的元素
const child = this.$el.querySelector(".child");
QRCode.toString(value, options, (error, string) => {
  if (error) {
    throw error;
  }
  child.innerHTML = string;
});

五.参数

value:'https://blog.csdn.net/weixin_43456275?spm=3001.5343'
options:{
      type: "image/png", //类型
      quality: 1, //图片质量A Number between 0 and 1
      width: 130, //高度
      height: 130, //宽度
      errorCorrectionLevel: "L", //容错率
      margin: 0, //外边距
      color: {
        dark: "#000000", //前景色
        light: "#ffffff", //背景色
      },
}