vue-qr 自动生成二维码+logo图片

最新推荐文章于 2024-09-13 14:51:26 发布

木子静静

最新推荐文章于 2024-09-13 14:51:26 发布

阅读量2k

点赞数 2

文章标签：前端 vue.js

原文链接：https://www.npmjs.com/package/vue-qr

版权

vue-qr 可根据文本内容生成二维码，还可以添加logo图片、设置logo大小、设置二维码大小、留白边距、背景图片、背景颜色等等。

1.安装

npm install vue-qr --save

2.使用

<vue-qr :logoSrc="logo" :logoScale="20" :size="270" :text="text" :margin="0" :dotScale="1"></vue-qr>

import vueQr from 'vue-qr'
export default {
  components: {
    vueQr
  },
  data(){
    return {
      text:"{name:'姓名',value:'21322'}",
      logo:require('@/assets/login/logo.png'),
  	}
  }
}

3.属性

text：需要编码的内容；
correctLevel：容错级别 0-3；
size：二维码尺寸，长宽一致（包含外边距）；
margin：二维码图像的外边距, 默认 20px，如果不需要可设置为0；
colorDark：实点的颜色；
colorLight：空白区域颜色；
bgSrc：准备嵌入二维码的背景图地址；
gifBgSrc：准备嵌入二维码的背景gif图，设置此项bgSrc将失效，设置此选项会影响性能，谨慎设置；
backgroundColor：背景颜色；
backgroundDimming：叠加在背景图上的颜色, 在解码有难度的时有一定帮助；
logoSrc：嵌入二维码中心的LOGO图片；
logoScale：LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2，设置过大会解码失败；
logoMargin： LOGO 标识周围的空白边框, 默认为0；
logoBackgroundColor：LOGO背景颜色,需要设置logoMargin；
logoCornerRadius：标识及其边框的圆角半径, 默认为0；
whiteMargin：若设为 true, 背景图外将绘制白色边框；
dotScale：数据区域点缩小比例,默认为0.35；
autoColor：背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true；
binarize：若为 true, 图像将被二值化处理, 未指定阈值则使用默认值；
binarizeThreshold：默认 128. (0 < threshold < 255) 二值化处理的阈值；
callback：生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)；
bindElement：指定是否需要自动将生成的二维码绑定到HTML上, 默认是true;