vue 2 生成带图标的二维码

对于Vue 2，你可以使用第三方库`qrcode-generator`和`vue-qrcode-component`来生成带图标的二维码。首先，你需要安装这两个库：

npm install qrcode-generator
npm install vue-qrcode-component

然后，在你的Vue组件中使用它们：

<template>
  <div>
    <img :src="qrcodeUrl" alt="QR Code" />
  </div>
</template>

<script>
import QRCode from 'qrcode-generator';
import VueQrcode from 'vue-qrcode-component';

export default {
  components: {
    VueQrcode
  },
  data() {
    return {
      qrcodeUrl: '' // 存储生成的二维码图片URL
    };
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      const qrcodeData = 'https://example.com'; // 二维码的内容

      // 创建QRCode实例
      const qr = QRCode(4, 'L');
      qr.addData(qrcodeData);
      qr.make();

      // 获取二维码的DataURL
      const qrcodeDataURL = qr.createDataURL();

      // 创建一个Image对象
      const image = new Image();

      // 在Image对象加载完成后生成带图标的二维码的DataURL
      image.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);
        
        // 添加图标到二维码上
        const logoImage = new Image();
        logoImage.src = 'path/to/logo.png'; // 图标的路径
        const logoSize = 64; // 图标的大小
        const logoPosition = (canvas.width - logoSize) / 2; // 图标的位置
        context.drawImage(logoImage, logoPosition, logoPosition, logoSize, logoSize);

        // 生成带图标的二维码的DataURL
        this.qrcodeUrl = canvas.toDataURL();
      };

      // 设置Image对象的src为二维码的DataURL
      image.src = qrcodeDataURL;
    }
  }
};
</script>

在上面的示例中，我们使用了`QRCode`库来生成二维码，并使用`vue-qrcode-component`来在Vue组件中展示二维码。你可以将`qrcodeData`更改为你想要生成二维码的实际数据，并将`logoImage.src`更改为你的图标的路径。

确保在Vue应用程序中正确导入和使用`qrcode-generator`和`vue-qrcode-component`库，这样你就可以在Vue 2中生成带图标的二维码了。