前端解析二維碼圖片&&生成二維碼圖片

生成二維碼圖片

1，第三方庫：qrcode

npm install qrcode --save

2，使用方法：

import QRCode from 'qrcode'（ts項目中import方式需要處理tslint錯誤）

const resCode = '后端返回的二維碼code'

const codeUrl = await QRCode.toDataURL(resCode)

將codeUrl賦值到img標簽的src即可展示出二維碼圖片，codeUrl是一個base64編碼。

 

<img src={codeUrl} alt="圖片加載失敗" />

 

 

解析二維碼圖片

1，第三方庫：qrcode-reader

npm install qrcode-reader --save

2，使用方法：

import QrCode from 'qrcode-reader' （適用於js）

const QrCode = require('qrcode-reader').default

 

const qr = new QrCode()

qr.decode('圖片文件路徑url')

qr.callback = (error, code) => {

　　if (error) 解析失敗 return；

　　console.log('解析結果'：code.result)

}

 

下面是本人實現圖片上傳->壓縮->解析 整個流程代碼 ，僅供參考。

// 該方法實現得到圖片路徑
getFileUrl(file: object){
    if (file === undefined) return;
    let url = null;
    if (window.createObjectURL != undefined) {
      // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) {
      // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
      // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }


// 該方法實現將圖片進行壓縮之后再進行解析
// 因為如果圖片過大（1M）以上，大概率會解析失敗
  qrCodeUploadedHandler(imageFile: object, fileImageUrl: string){
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d') as any;
    const img = new Image();
    img.src = fileImageUrl;
    img.onload = () => {
      const originWidth = img.width;
      const originHeight = img.height;
      const maxWidth = 1280;
      const maxHeight = 768;
      let targetWidth = originWidth;
      let targetHeight = originHeight;
      if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
          targetWidth = maxWidth;
          targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
          targetHeight = maxHeight;
          targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
      }
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      context.clearRect(0, 0, targetWidth, targetHeight);
      // 圖片壓縮
      context.drawImage(img, 0, 0, targetWidth, targetHeight);
      canvas.toBlob(
        blob => {
          // new File(blob,name,type)方法可將canvasblob轉換成文件
          // 轉換成的文件與上傳文件的files[0]格式一樣
          const newImageFile = new File([blob as any], (imageFile as any).name, { type: (imageFile as any).type });
          const qr = new QrCode()
          qr.decode(this.getFileUrl(newImageFile));
          qr.callback = (error: any, resCode: any) => {
            let result = "";
            if (error) {
              result = "解析失敗"
            } else {
              result = resCode.result
            }
            this.uploadReport = {
              title: 'qrcode-reader-upload',
              result: result,
            }
          }
        },
        'image/jpeg',
        0.7,
      );
    };
    img.onerror = () => console.error('Upload file of image format please.');
  };


  // 該方法實現圖片上傳
  changeHandler(e: any){
    this.uploadReport = {
      title: 'qrcode-reader-upload',
      result: '',
    }
    const file = e.target.files[0];
    if (file !== undefined) {
      const fr = new FileReader();
      fr.readAsDataURL(file);
      fr.addEventListener('load', () => {
        this.qrCodeUploadedHandler(file, fr.result as string);
      });
      // var qr = new QrCode()
      // qr.decode(this.getFileUrl(file));
      // qr.callback = (error: any, resCode: any) => {
      //   let result = "";
      //   if (error) {
      //     result = "解析失敗"
      //   } else {
      //     result = resCode.result
      //   }
      //   this.uploadReport = {
      //     title: 'qrcode-reader-upload',
      //     result: result,
      //   }
      // }
    }
  }