js生成二维码和识别二维码

<template>
  <img :src="base64Qrcode" alt="二维码" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
// npm install jsqr --save
import jsQR from 'jsqr'
// npm install --save qrcode
const QRCode = require('qrcode')
export default defineComponent({
  setup() {
    const base64Qrcode = ref('')
    // 生成二维码
    QRCode.toDataURL(
      '一路繁花似锦绣前程',
      { margin: 0 },
      function (err: Error, url: string) {
        base64Qrcode.value = url
        // 识别二维码
        const image = new Image()
        image.src = url
        image.onload = function () {
          const htmlCanvasElement = document.createElement('canvas')
          const context = htmlCanvasElement.getContext('2d')!
          context.drawImage(image, 0, 0, 120, 120)
          const imageData = context.getImageData(0, 0, 120, 120)
          const result = jsQR(imageData.data, 120, 120)
          console.log(result?.data)
        }
      }
    )
    return {
      base64Qrcode
    }
  }
})
</script>

<style lang="scss" scoped></style>