vue使用qrcodejs2生成二维码转换为图片

在Vue应用中，你可以使用`vue-qrcode-reader`这个库结合`qrcodejs2`来生成二维码并将其转换为图片。首先，你需要安装这两个依赖：

npm install qrcodejs2 vue-qrcode-reader

然后，在Vue组件里，可以这样做：

<template>
  <div>
    <button @click="generateQRCode">生成二维码</button>
    <img v-if="qrImage" :src="qrImage" alt="二维码">
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import { useQrReader } from 'vue-qrcode-reader';

export default {
  data() {
    return {
      qrImage: null,
    };
  },
  methods: {
    async generateQRCode() {
      // 创建一个qrcode实例
      const qr = new QRCode(document.createElement('canvas'));

      // 你可以在这里设置二维码的内容
      const content = '你要显示的信息';
      qr.make(content);

      // 获取二维码的Base64数据
      this.qrImage = qr.toDataURL();
    },
  },
  components: {
    useQrReader,
  },
};
</script>

在这个例子中，当你点击“生成二维码”按钮时，会创建一个新的二维码，并将其渲染成图片。注意，这只是一个基本示例，实际应用可能需要处理错误、取消等场景。