vue中使用vue-qr生成漂亮的二维码

最近在项目中遇到一个生成二维码的需求,并且二维码上要带上logo和背景。使用qrcode只能单纯的生成二维码,不能带logo及其它一些自定义。
于是便找到了vue-qr这个插件。vue-qr具有自定义二维码背景、logo、实点颜色等等特性,能够生成更炫酷的二维码。

vue-qr是Awesome-qr.js的Vue 2.x组件


安装

npm install vue-qr --save

使用

<template>
  <div>
    <vue-qr :correctLevel="3" :autoColor="false" colorDark="#313a90" :bgSrc="bgSrc" :logoSrc="logoSrc" :text="codeUrl" :size="95" :margin="0" :logoMargin="3"></vue-qr>
  </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
  data () {
    return {
      logoSrc: require('../assets/img/qrlogo.png'),
      bgSrc: require('../assets/img/bgSrc.png'),
      codeUrl: 'https://github.com/lx719679895'
    }
  },
  components: {
    VueQr
  }
}
</script>

参数及说明

基础

参数 说明 必要性
text 二维码内容 必需
size 尺寸, 长宽一致, 包含外边距 必需
margin 二维码图像的外边距, 默认 20px 可选
dotScale 数据区域点缩小比例,默认为0.35 可选
correctLevel 容错级别 0-3 可选
whiteMargin 若设为 true, 背景图外将绘制白色边框(默认是true) 可选
bindElement 指定是否需要自动将生成的二维码绑定到HTML上(默认是true) 可选
callback 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序) 可选

可以使用 bindElement 来指定要自动填入二维码图像的元素的 ID(不含前导「#」),支持 <div> 或是 <img>

颜色

参数 说明 必要性
colorDark 实点的颜色 可选
colorLight 空白区的颜色 可选
autoColor 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true 可选

若设置了 autoColor,则 colorDarkcolorLight 都将被忽略。

背景图像

参数 说明 必要性
bgSrc 欲嵌入的背景图地址 可选
gifBgSrc 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能 可选
backgroundColor 背景色 可选
backgroundDimming 叠加在背景图上的颜色, 在解码有难度的时有一定帮助 可选

若设定了 gifBackground ,则 backgroundImage 将会被忽略。

logo图像

参数 说明 必要性
logoSrc 嵌入至二维码中心的 LOGO 地址 可选
logoScale 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale(size-2margin), 默认 0.2 可选
logoMargin 标识周围的空白边框, 默认为0 可选
logoBackgroundColor 背景色,需要设置 logo margin 可选
logoCornerRadius 标识及其边框的圆角半径, 默认为0 可选

后处理

参数 说明 必要性
binarize 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值,默认是false 可选
binarizeThreshold (0 < threshold < 255) 二值化处理的阈值 可选

推荐阅读更多精彩内容