最近在項(xiàng)目中遇到一個(gè)生成二維碼的需求括饶，并且二維碼上要帶上logo和背景暇藏。使用qrcode只能單純的生成二維碼目代，不能帶logo及其它一些自定義焚刚。
于是便找到了vue-qr這個(gè)插件点弯。vue-qr具有自定義二維碼背景、logo矿咕、實(shí)點(diǎn)顏色等等特性抢肛，能夠生成更炫酷的二維碼。
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>
參數(shù)及說(shuō)明
基礎(chǔ)
| 參數(shù) | 說(shuō)明 | 必要性 |
|---|---|---|
| text | 二維碼內(nèi)容 | 必需 |
| size | 尺寸, 長(zhǎng)寬一致, 包含外邊距 | 必需 |
| margin | 二維碼圖像的外邊距, 默認(rèn) 20px | 可選 |
| dotScale | 數(shù)據(jù)區(qū)域點(diǎn)縮小比例,默認(rèn)為0.35 | 可選 |
| correctLevel | 容錯(cuò)級(jí)別 0-3 | 可選 |
| whiteMargin | 若設(shè)為 true, 背景圖外將繪制白色邊框（默認(rèn)是true） | 可選 |
| bindElement | 指定是否需要自動(dòng)將生成的二維碼綁定到HTML上（默認(rèn)是true） | 可選 |
| callback | 生成的二維碼 Data URI 可以在回調(diào)中取得,第一個(gè)參數(shù)為二維碼 data URL, 第二個(gè)參數(shù)為 props 傳過(guò)來(lái)的 qid(因?yàn)槎S碼生成是異步的,所以加個(gè) id 用于排序) | 可選 |
可以使用
bindElement來(lái)指定要自動(dòng)填入二維碼圖像的元素的 ID（不含前導(dǎo)「#」）痴腌，支持<div>或是<img>雌团。
顏色
| 參數(shù) | 說(shuō)明 | 必要性 |
|---|---|---|
| colorDark | 實(shí)點(diǎn)的顏色 | 可選 |
| colorLight | 空白區(qū)的顏色 | 可選 |
| autoColor | 若為 true, 背景圖的主要顏色將作為實(shí)點(diǎn)的顏色, 即 colorDark,默認(rèn) true | 可選 |
若設(shè)置了
autoColor，則colorDark和colorLight都將被忽略士聪。
背景圖像
| 參數(shù) | 說(shuō)明 | 必要性 |
|---|---|---|
| bgSrc | 欲嵌入的背景圖地址 | 可選 |
| gifBgSrc | 欲嵌入的背景圖 gif 地址,設(shè)置后普通的背景圖將失效。設(shè)置此選項(xiàng)會(huì)影響性能 | 可選 |
| backgroundColor | 背景色 | 可選 |
| backgroundDimming | 疊加在背景圖上的顏色, 在解碼有難度的時(shí)有一定幫助 | 可選 |
若設(shè)定了
gifBackground猛蔽，則backgroundImage將會(huì)被忽略剥悟。
logo圖像
| 參數(shù) | 說(shuō)明 | 必要性 |
|---|---|---|
| logoSrc | 嵌入至二維碼中心的 LOGO 地址 | 可選 |
| logoScale | 用于計(jì)算 LOGO 大小的值, 過(guò)大將導(dǎo)致解碼失敗, LOGO 尺寸計(jì)算公式 logoScale(size-2margin), 默認(rèn) 0.2 | 可選 |
| logoMargin | 標(biāo)識(shí)周?chē)目瞻走吙? 默認(rèn)為0 | 可選 |
| logoBackgroundColor | 背景色,需要設(shè)置 logo margin | 可選 |
| logoCornerRadius | 標(biāo)識(shí)及其邊框的圓角半徑, 默認(rèn)為0 | 可選 |
后處理
| 參數(shù) | 說(shuō)明 | 必要性 |
|---|---|---|
| binarize | 若為 true, 圖像將被二值化處理, 未指定閾值則使用默認(rèn)值灵寺，默認(rèn)是false | 可選 |
| binarizeThreshold | (0 < threshold < 255) 二值化處理的閾值 | 可選 |
