二维码qrcode插件


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", //背景色
      },
}

版权声明:本文为weixin_43456275原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。