求推荐ReactJS中可返回masking type等详情的二维码扫描npm库

以下两个npm库可以满足你获取二维码文本、掩码类型、编码类型、纠错级别、版本号等数据的需求：

1. jsQR #

• 轻量级纯JavaScript解析库，无外部依赖，集成成本低
• 解析后返回的对象包含核心元数据：
  • data: 二维码文本内容
  • version: 二维码版本号
  • maskPattern: 掩码类型
  • errorCorrectionLevel: 纠错级别（对应你提到的错误码相关信息）
  • 编码类型可通过分析返回的bits数据结合内容格式判断
• React使用示例：

  import jsQR from 'jsqr';
  
  const scanQR = (imageData) => {
    const qrResult = jsQR(imageData, imageData.width, imageData.height);
    if (qrResult) {
      console.log('二维码文本:', qrResult.data);
      console.log('版本号:', qrResult.version);
      console.log('掩码类型:', qrResult.maskPattern);
      console.log('纠错级别:', qrResult.errorCorrectionLevel);
    }
  };
  

• 安装命令：npm install jsqr

2. @zxing/library #

• 知名条码库ZXing的JavaScript实现，支持多种条码类型，功能全面
• 直接返回所有你需要的元数据，无需额外推导：
  • text: 二维码文本内容
  • resultMetadata.get('QR_CODE_VERSION'): 版本号
  • resultMetadata.get('QR_CODE_MASK_PATTERN'): 掩码类型
  • resultMetadata.get('ERROR_CORRECTION_LEVEL'): 纠错级别
  • resultMetadata.get('CHARACTER_SET'): 编码类型（如UTF-8、ISO-8859-1）
• React使用示例：

  import { BrowserQRCodeReader } from '@zxing/library';
  
  const qrReader = new BrowserQRCodeReader();
  
  const startQRScan = async () => {
    try {
      const scanResult = await qrReader.decodeFromVideoDevice(null, 'your-video-element-id');
      console.log('二维码文本:', scanResult.text);
      console.log('版本号:', scanResult.resultMetadata.get('QR_CODE_VERSION'));
      console.log('掩码类型:', scanResult.resultMetadata.get('QR_CODE_MASK_PATTERN'));
      console.log('纠错级别:', scanResult.resultMetadata.get('ERROR_CORRECTION_LEVEL'));
      console.log('编码类型:', scanResult.resultMetadata.get('CHARACTER_SET'));
    } catch (error) {
      console.error('扫描出错:', error);
    }
  };
  

• 安装命令：npm install @zxing/library

注意事项 #

• 两个库都支持从图片或摄像头视频流中解析二维码
• 在React中使用时，需确保图像/视频资源加载完成后再执行解析操作，避免出现无效数据

内容的提问来源于stack exchange，提问作者Nilesh Gaikwad