网页生成二维码

记录一下我上次写活动页面，把网页生成海报 + 二维码

生成普通的二维码

qrcode

• 一个比较流行的生成二维码的库

npm install qrcode --save

  import Qrcode from 'qrcode'
  // 配置项
  const options = {
    width: 80,
    height: 80,
    background: "#ffffff",
    colorDark: '#000000',
    margin: 1
  }

  const result = await Qrcode.toDataURL('https:xxxxx', options) // 识别二维码后所跳转的链接
  const images = document.createElement('img')
  images.setAttribute('src', result)
  this.$refs.qrcode.appendChild(images)

vue-qr

• 生成一个可以有背景图片和添加 logo 的效果，因为有的业务场景下，需要加上公司的 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 链接

网页生成图片可以参考我的另一个小文章 链接

其实很多场景下都是二维码+图片的方式，二者的顺序是先生成二维码，放到 DOM 中，在利用其它的库把 DOM 生成图片。