qrcode.vue生成二维码另存为图片

可以使用第三方库qrcode和html2canvas来生成并保存二维码图片。具体步骤如下：

1. 安装依赖库

npm install qrcode html2canvas --save

2. 在Vue组件中引入依赖库

import QRCode from 'qrcode';
import html2canvas from 'html2canvas';

3. 在Vue组件中定义生成二维码的方法

generateQRCode() {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const qrCodeUrl = 'https://example.com'; // 二维码内容
  const size = 256; // 二维码图片大小

  QRCode.toCanvas(canvas, qrCodeUrl, { errorCorrectionLevel: 'L', width: size }, (error) => {
    if (error) {
      console.error(error);
      return;
    }

    // 绘制二维码图片及其他元素到canvas上
    context.fillStyle = '#fff';
    context.fillRect(0, 0, size, size);
    context.drawImage(canvas, 0, 0, size, size);
    context.font = '16px Arial';
    context.fillStyle = '#333';
    context.fillText('Scan QR code to visit our website', 20, size + 30);

    // 将canvas转换为图片并保存到本地
    html2canvas(canvas).then((canvas) => {
      const link = document.createElement('a');
      link.download = 'qr-code.png';
      link.href = canvas.toDataURL('image/png');
      link.click();
    });
  });
}

4. 在Vue组件中添加按钮并调用生成二维码方法

<template>
  <div>
    <button @click="generateQRCode()">Generate QR Code</button>
  </div>
</template>

这样，点击按钮后就可以生成二维码并保存为png格式的图片了。