Vue3+qrcode.js生成带文字说明的二维码：扫码更轻松，信息更直观！

2023-12-23 05:31:15

在瞬息万变的数字世界里，二维码已成为一种不可或缺的信息载体。无论是商品溯源、支付收款，还是文件分享，二维码的身影无处不在。作为一名Vue3开发人员，掌握如何使用qrcode.js生成二维码，并添加文字说明，无疑是一项必备技能。

一、创建Vue3项目

安装Vue3

npm install -g @vue/cli
vue create qrcode-demo
cd qrcode-demo

安装qrcode.js

npm install qrcode.js

二、使用qrcode.js生成二维码

在main.js中引入qrcode.js

import QRCode from 'qrcode'

在组件中使用qrcode.js生成二维码

<template>
  <div id="qrcode"></div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  mounted() {
    const qrcode = new QRCode('qrcode')
    qrcode.make('https://juejin.cn')
  }
}
</script>

三、添加文字说明

使用canvas绘制文字

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

ctx.font = 'bold 16px Arial'
ctx.fillStyle = '#000'
ctx.fillText('扫码查看更多信息', 10, 20)

合并二维码和文字说明

const mergedCanvas = document.createElement('canvas')
const mergedCtx = mergedCanvas.getContext('2d')

mergedCtx.drawImage(qrcodeCanvas, 0, 0)
mergedCtx.drawImage(textCanvas, 0, qrcodeCanvas.height)

四、下载二维码

const link = document.createElement('a')
link.download = 'qrcode.png'
link.href = mergedCanvas.toDataURL('image/png')
link.click()

五、示例代码

<template>
  <div>
    <button @click="generateQRCode">生成二维码</button>
    <div id="qrcode"></div>
    <a id="downloadLink" download="qrcode.png" style="display: none">下载二维码</a>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  data() {
    return {
      text: 'https://juejin.cn'
    }
  },
  methods: {
    generateQRCode() {
      const qrcode = new QRCode('qrcode')
      qrcode.make(this.text)

      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')

      ctx.font = 'bold 16px Arial'
      ctx.fillStyle = '#000'
      ctx.fillText('扫码查看更多信息', 10, 20)

      const mergedCanvas = document.createElement('canvas')
      const mergedCtx = mergedCanvas.getContext('2d')

      mergedCtx.drawImage(qrcode.canvas, 0, 0)
      mergedCtx.drawImage(canvas, 0, qrcode.canvas.height)

      const link = document.getElementById('downloadLink')
      link.href = mergedCanvas.toDataURL('image/png')
      link.click()
    }
  }
}
</script>