使用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：

  保存二維碼
原創文章，作者：UPMAP，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/372036.html