記錄一下我上次寫活動(dòng)頁面江兢，把網(wǎng)頁生成海報(bào) + 二維碼
生成普通的二維碼
qrcode
- 一個(gè)比較流行的生成二維碼的庫
npm install qrcode --save
import Qrcode from 'qrcode'
// 配置項(xiàng)
const options = {
width: 80,
height: 80,
background: "#ffffff",
colorDark: '#000000',
margin: 1
}
const result = await Qrcode.toDataURL('https:xxxxx', options) // 識別二維碼后所跳轉(zhuǎn)的鏈接
const images = document.createElement('img')
images.setAttribute('src', result)
this.$refs.qrcode.appendChild(images)
vue-qr
- 生成一個(gè)可以有背景圖片和添加 logo 的效果，因?yàn)橛械臉I(yè)務(wù)場景下丁频，需要加上公司的 logo
npm install vue-qr --save
<vue-qr
:callback="handleQr"
width="54"
height="54"
:margin="0"
:correctLevel="1"
colorDark="#000000"
backgroundColor="#000"
colorLight="#fff"
class="qrcode-box">
</vue-qr>
- 具體的配置可以參考 npm 鏈接
網(wǎng)頁生成圖片可以參考我的另一個(gè)小文章 鏈接
其實(shí)很多場景下都是二維碼+圖片的方式杉允，二者的順序是先生成二維碼，放到 DOM 中限府，在利用其它的庫把 DOM 生成圖片夺颤。
