vue3 h5 html5-qrcode 获取图片

Vue3 中使用 HTML5 QRCode 库来生成二维码并显示为图片，通常需要以下几个步骤：

1. 首先，在项目中安装 `html5-qrcode` 模块。你可以通过npm或yarn来安装：

   npm install html5-qrcode --save
   # 或者
   yarn add html5-qrcode

2. 引入库到 Vue 组件中，并创建一个方法来生成二维码。例如：

import QRCode from 'html5-qrcode';

export default {
  methods: {
    generateQRCode(text) {
      const canvas = document.createElement('canvas');
      QRCode.decode(text, canvas);
      // 画布上会自动绘制二维码
      this.qrCodeImageSrc = canvas.toDataURL();
    }
  },
  data() {
    return {
      qrCodeImageSrc: '',
    };
  },
}

3. 在模板中，可以将生成的二维码作为 img 标签的 src 属性显示出来：

<template>
  <div>
    <button @click="generateQRCode('你要扫描的内容')">生成二维码</button>
    <img :src="qrCodeImageSrc" alt="二维码" />
  </div>
</template>

4. 当用户点击按钮时，调用 `generateQRCode` 方法，传入想要生成二维码的数据。