前端解析二维码图片&&生成二维码图片

生成二维码图片

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,
      //   }
      // }
    }
  }