# 生成二维码
- 最近在项目中遇到一个生成二维码的需求，并且二维码上要带上 logo 和背景。
- 使用 qrcode 只能单纯的生成二维码，不能带 logo 及其它一些自定义。
- 于是便找到了 vue-qr 这个插件。vue-qr 具有自定义二维码背景、logo、实点颜色等等特性，能够生成更炫酷的二维码。
# 效果
# 安装
npm install vue-qr --save
1
# 代码
<template>
<div class="sg-qrcode">
<vue-qr
:text="config.url"
:correctLevel="3"
:size="250"
:dotScale="0.45"
:margin="10"
colorDark="#000"
colorLight="white"
backgroundColor="white"
backgroundDimming="white"
:logoSrc="config.logo"
:logoScale="0.2"
:logoMargin="5"
logoBackgroundColor="white"
></vue-qr>
</div>
</template>
<script>
import vueQr from "vue-qr"; //引入二维码生成组件
export default {
components: {
vueQr, //二维码生成组件
},
data() {
return {
config: {
url: "https://www.baidu.com", // 扫码访问的链接地址
logo: "../../../../../../static/image/saas/code.png",
},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# 属性说明
# 基础
| 参数 | 说明 | 必要性 |
|---|---|---|
| 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（不含前导「#」），支持或是。
# 颜色
| 参数 | 说明 | 必要性 |
|---|---|---|
| colorDark | 实点的颜色 | 可选 |
| colorLight | 空白区的颜色 | 可选 |
| autoColor | 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true | 可选 |
若设置了
autoColor，则colorDark和colorLight都将被忽略。
# 背景图像
| 参数 | 说明 | 必要性 |
|---|---|---|
| bgSrc | 欲嵌入的背景图地址 | 可选 |
| gifBgSrc | 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能 | 可选 |
| backgroundColor | 背景色 | 可选 |
| backgroundDimming | 叠加在背景图上的颜色, 在解码有难度的时有一定帮助 | 可选 |
若设定了
gifBackground，则backgroundImage将会被忽略。
# logo图像
| 参数 | 说明 | 必要性 |
|---|---|---|
| logoSrc | 嵌入至二维码中心的 LOGO 地址 | 可选 |
| logoScale | 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2 | 可选 |
| logoMargin | 标识周围的空白边框, 默认为0 | 可选 |
| logoBackgroundColor | 背景色,需要设置 logo margin | 可选 |
| logoCornerRadius | 标识及其边框的圆角半径, 默认为0 | 可选 |
# 后处理
| 参数 | 说明 | 必要性 |
|---|---|---|
| binarize | 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值，默认是false | 可选 |
| binarizeThreshold | (0 < threshold < 255) 二值化处理的阈值 | 可选 |