从相机胶卷React Native解码QR码图像

Question

我正在尝试在我的应用程序中实现一个功能,用户可以从他们的相机胶卷中选择一张图片,并且应用程序将解码图像中的QR码.

我目前正在使用react-native-camera-roll-picker:https://github.com/jeanpan/react-native-camera-roll-picker 和react-native-qrcode-local-image:https:// github的.com/remobile /反应天然-QRCode的局部图像

问题是本地QR码图像库要求我传递本地路径,并且与react-native-camera-roll-picker提供的本机uri不兼容.我会使用另一个库来解码图像QR码但这个似乎是唯一适用于iOS和Android并从现有图像而不是从实际相机扫描的图像.

我也尝试实现react-native-fetch-blob以便在本地暂时保存相机胶卷图像,但这也给我带来了麻烦:https://github.com/wkh237/react-native-fetch-blob

这是我目前在一个函数中的尝试,我在react-native-camera-roll-picker的"回调"道具中调用(以前的尝试被注释掉了):

_pickedImage(array,currentImg) {
console.log(currentImg)
var path = RNFS.DocumentDirectoryPath + '/pickedqr';
let rnfbURI = RNFetchBlob.wrap(RNFetchBlob.fs.asset(currentImg.uri))
const Blob = RNFetchBlob.polyfill.Blob
Blob.build(rnfbURI, {type:'image/jpg'}).then((b) => {
  tmpBlob = b;
  RNFetchBlob.fs.readFile(tmpBlob, 'base64').then((data) => {
    console.log("Base64", data)
    QRDecoder.decode(`data:image/gif;base64,${data}`, (error, result)=>{
      console.log("Code", result)
      console.log("Error", error)
    });
  });
})
/*fullPath = currentImg.uri.replace("assets-library://", "cdvfile://localhost/assets-library/")
QRDecoder.decode(fullPath, (error, result)=>{
  console.log("Code", result)
  console.log("Error", error)
});*/
/*let blb = Blob.build( rnfbURI, { type: 'image/jpg'})
console.log(blb)*/
/*RNFetchBlob.fs.readFile(rnfbURI, 'base64').then((data) => {
  console.log("Base64", data)
  QRDecoder.decode(`data:image/gif;base64,${data}`, (error, result)=>{
    console.log("Code", result)
    console.log("Error", error)
  });
})*/
}

我现在完全失去了所以任何方法或见解都会受到高度赞赏.

Answer 1

您可以使用react-native-qrcode-scanner从图像或直接通过相机扫描 QR。

\n

安装：

\n

使用以下命令安装依赖项：

\n

yarn add react-native-camera react-native-qr-scanner\n

\n

通过使用链接这些库：

\n

react-native link react-native-camera && react-native-qr-scanner\n

\n

您需要将权限添加到项目的 AndroidManifest.xml 中。这应该在您的android/app/src/main/AndroidManifest.xml添加以下内容中找到：

\n

<uses-permission android:name="android.permission.CAMERA" />\n<uses-permission android:name="android.permission.RECORD_AUDIO"/>\n<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />\n<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />\n<uses-permission android:name="android.permission.VIBRATE"/>\n

\n

对于 iOS 10 及更高版本，您需要将“隐私 - 相机使用说明”键添加到项目的 info.plist 中。这应该可以在 中找到your_project/ios/your_project/Info.plist。添加以下代码：

\n

<key>NSCameraUsageDescription</key>\n<string/>\n<key>NSPhotoLibraryUsageDescription</key>\n<string/>\n<key>NSMicrophoneUsageDescription</key>\n<string/>\n<key>NSPhotoLibraryAddUsageDescription</key>\n<string/>\n

\n

用法：

\n

import React, {Component} from \'react\';\nimport {Platform, StyleSheet, Text, View, TouchableOpacity} from \'react-native\';\nimport {QRreader} from \'react-native-qr-scanner\';\nimport ImagePicker from \'react-native-image-picker\';\n \nexport default class Scanner extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      reader: {\n        message: null,\n        data: null\n      }\n    };\n  }\n  render() {\n    return (\n      <View style={styles.container}>\n        <TouchableOpacity onPress={()=>{\n          this.openPhoto();\n        }}>\n          <Text style={{marginTop: 20}}>\xe6\x89\x93\xe5\xbc\x80\xe7\x9b\xb8\xe5\x86\x8c\xe8\xaf\x86\xe5\x88\xab\xe4\xba\x8c\xe7\xbb\xb4\xe7\xa0\x81</Text>\n        </TouchableOpacity>\n        <View>\n        {!this.state.reader? <Text>{!this.state.reader.message?\'\':`${this.state.reader.message}`}</Text>: <Text>{!this.state.reader.message?\'\':`${this.state.reader.message}:${this.state.reader.data}`}</Text>}\n        </View>\n      </View>\n    );\n  }\n  \n  openPhoto(){\n    console.log(\'ImagePicker\');\n    ImagePicker.launchImageLibrary({}, (response) => {\n      console.log(\'Response = \', response);\n    \n      if (response.didCancel) {\n        console.log(\'User cancelled image picker\');\n      }\n      else if (response.error) {\n        console.log(\'ImagePicker Error: \', response.error);\n      }\n      else if (response.customButton) {\n        console.log(\'User tapped custom button: \', response.customButton);\n      }\n      else {\n        if(response.uri){\n          var path = response.path;\n          if(!path){\n              path = response.uri;\n          }\n          QRreader(path).then((data)=>{\n            this.setState({reader: {\n              message: \'\xe8\xaf\x86\xe5\x88\xab\xe6\x88\x90\xe5\x8a\x9f\',\n              data: data\n            }});\n            // \xe5\x8d\x81\xe7\xa7\x92\xe5\x90\x8e\xe8\x87\xaa\xe5\x8a\xa8\xe6\xb8\x85\xe7\xa9\xba\n            setTimeout(() => {\n              this.setState({reader: {\n                message: null,\n                data: null\n              }})\n            }, 10000);\n          }).catch((err)=>{\n            this.setState({reader: {\n              message: \'\xe8\xaf\x86\xe5\x88\xab\xe5\xa4\xb1\xe8\xb4\xa5\',\n              data: null\n            }});\n          });\n          \n      }\n      }\n    });\n  }\n}\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \'#fff\'\n  }\n});\n

\n

您可以在这里阅读有关此库的更多信息：https ://www.npmjs.com/package/react-native-qr-scanner

\n