React Native中上传拍摄的二维码图片无法识别的问题求助

我正在开发一个React Native二维码扫描器，支持用户从相册上传二维码图片并解析数据。当前代码能正常识别标准的二维码图片，但用户上传拍摄的二维码照片（比如用手机拍摄的纸质二维码）时，无法正常解析。

以下是我的代码：

import RNQRGenerator from 'rn-qr-generator';
import {launchImageLibrary} from 'react-native-image-picker';

const options = {
  title: 'photoUpload',
  takePhotoButtonTitle: 'photoTake',
  chooseFromLibraryButtonTitle: 'photoLibrary',
  cancelButtonTitle: 'cancel',
  quality: 0.7,
  base64: true,
  maxWidth: 728,
};
const App = () => {
  const onPick = () => {
    launchImageLibrary(options, response => {
      if (response.didCancel) {
        console.log('User cancelled photo picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        RNQRGenerator.detect({uri: response.assets[0].uri})
          .then(res => {
            console.log('Detected value', res);
            if (res.values.length === 0) {
              console.log('Code not found');
            } else {
              console.log('value: ', res.values);
            }
          })
          .catch(err => {
            console.log('Cannot detect', err);
          });
      }
    });
  };

  return (
    <Button
      title="Pick from library"
      onPress={() => {
        onPick();
      }}
    />
  );
};

可能原因 #

拍摄的二维码照片常存在倾斜、模糊、光照不均等问题，加上RNQRGenerator的识别算法对这类非标准图片兼容性有限，同时图片压缩、跨平台URI格式差异也可能导致识别失败。

解决方案 #

1. 图片预处理校正 #

使用图片处理库先校正拍摄照片的角度、增强清晰度，再进行识别：
首先安装依赖：

npm install @react-native-community/image-manipulator

修改后的代码：

import RNQRGenerator from 'rn-qr-generator';
import {launchImageLibrary} from 'react-native-image-picker';
import { manipulateAsync, SaveFormat } from '@react-native-community/image-manipulator';

const options = {
  title: 'photoUpload',
  takePhotoButtonTitle: 'photoTake',
  chooseFromLibraryButtonTitle: 'photoLibrary',
  cancelButtonTitle: 'cancel',
  quality: 0.9,
  base64: true,
  maxWidth: 1024,
};

const App = () => {
  const onPick = async () => {
    launchImageLibrary(options, async (response) => {
      if (response.didCancel) {
        console.log('User cancelled photo picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        try {
          // 根据照片EXIF信息自动校正旋转角度
          const processedImage = await manipulateAsync(
            response.assets[0].uri,
            [],
            { compress: 0.8, format: SaveFormat.PNG }
          );
          // 用处理后的图片识别二维码
          const res = await RNQRGenerator.detect({uri: processedImage.uri});
          if (res.values.length === 0) {
            console.log('Code not found');
          } else {
            console.log('value: ', res.values);
          }
        } catch (err) {
          console.log('Cannot detect', err);
        }
      }
    });
  };

  return (
    <Button
      title="Pick from library"
      onPress={onPick}
    />
  );
};

2. 更换更鲁棒的识别库 #

如果RNQRGenerator识别能力不足，可以替换为@zxing/library，它对模糊、倾斜的二维码兼容性更好：
安装依赖：

npm install @zxing/library

修改识别逻辑：

import {launchImageLibrary} from 'react-native-image-picker';
import { BrowserMultiFormatReader } from '@zxing/library';

const reader = new BrowserMultiFormatReader();
const options = {
  // ...保持原有参数，建议将quality设为0.9
  quality: 0.9,
  base64: true,
};

const App = () => {
  const onPick = () => {
    launchImageLibrary(options, async (response) => {
      // ...省略错误处理逻辑
      else {
        try {
          // 直接用base64数据识别
          const result = await reader.decodeFromBase64Image(response.assets[0].base64);
          console.log('识别结果：', result.text);
        } catch (err) {
          console.log('无法识别二维码', err);
        }
      }
    });
  };

  return <Button title="Pick from library" onPress={onPick} />;
};

3. 适配跨平台URI路径 #

Android和iOS的URI格式存在差异，可借助react-native-fs转换为绝对路径：
安装依赖：

npm install react-native-fs

转换URI代码：

import RNFS from 'react-native-fs';
import { Platform } from 'react-native';

// ...在识别前转换URI
const originalUri = response.assets[0].uri;
const targetUri = Platform.OS === 'android' 
  ? originalUri 
  : RNFS.DocumentDirectoryPath + originalUri.replace('file://', '');

RNQRGenerator.detect({uri: targetUri})
// ...后续识别逻辑不变

内容的提问来源于stack exchange，提问作者pratteek shaurya