使用Vue生成二维码并保存图片

一、生成二维码

生成二维码是基于第三方库qrcode-generator的，我们可以通过npm安装该库：

npm install qrcode-generator --save

我们新建一个qrcode.js，引入下载的库：

import QRCode from 'qrcode-generator';

我们可以封装一个生成二维码的方法：

generateQRCode(text) {
  let typeNumber = 4;
  let errorCorrectionLevel = 'L';
  let qr = QRCode(typeNumber, errorCorrectionLevel);
  qr.addData(text);
  qr.make();
  return qr.createImgTag();
}

该方法传入一个文本参数，使用qrcode-generator创建二维码，将参数text添加到二维码中，最后返回一个img标签的字符串，该字符串可以直接插入到HTML中显示：

this.qrcodeImg = this.generateQRCode('http://www.example.com');

在HTML中展示二维码：

二、保存图片

我们可以使用HTML5的canvas将二维码转换为图像，然后通过下载链接的形式保存图片。首先定义一个canvas元素：

我们将二维码生成在画布上，获取画布的数据，并创建一个链接用于下载。canvas绘制图形是异步的，因此我们使用Promise进行处理：

saveQRCode() {
  let canvas = this.$refs.canvas;
  let img = new Image();
  img.src = this.qrcodeImg;
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0,img.width,img.height);
    canvas.toBlob(function(blob) {
      let url = URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = url;
      a.download = 'QRCode.png';
      a.click();
      window.URL.revokeObjectURL(url);
    });
  }
}

我们定义一个方法saveQRCode，该方法将canvas元素设置为和图像一样的大小，并在canvas上绘制图像。然后将画布数据转换为blob对象，创建下载链接，设置下载名称为QRCode.png，触发点击事件，最后撤销创建的URL。

三、完整代码示例

qrcode.vue：

  

<script>
import QRCode from 'qrcode-generator';

export default {
  data() {
    return {
      qrcodeImg: '',
    }
  },
  methods: {
    generateQRCode(text) {
      let typeNumber = 4;
      let errorCorrectionLevel = 'L';
      let qr = QRCode(typeNumber, errorCorrectionLevel);
      qr.addData(text);
      qr.make();
      return qr.createImgTag();
    },
    saveQRCode() {
      let canvas = this.$refs.canvas;
      let img = new Image();
      img.src = this.qrcodeImg;
      img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(img,0,0,img.width,img.height);
        canvas.toBlob(function(blob) {
          let url = URL.createObjectURL(blob);
          let a = document.createElement('a');
          a.href = url;
          a.download = 'QRCode.png';
          a.click();
          window.URL.revokeObjectURL(url);
        });
      }
    },
  },
  mounted() {
    this.qrcodeImg = this.generateQRCode('http://www.example.com');
  }
}
</script>