android - React Native：如果文档在框架内，有没有办法通过使用 react native 相机检测文档边框并更改覆盖颜色？

Question

我是反应原生的新手。我目前正在尝试实现可以​​扫描和捕获身份证图像的代码。基本上我可以使用反应原生相机拍摄图像并保存到画廊，但我不知道如何检测身份证边框。我正在寻求可以指导我进行卡片边界检测或一些可以实现此类功能的开源库的帮助。

基本上，我已经尝试实现react-native-documentscanner-android和rn-doc-scanner-android库。但是我没有实现 react-native-documentscanner-android 库，并且 rn-doc-scanner-android 没有卡片边界检测功能。

这是我的代码：

import React, {Component} from 'react';
import { RNCamera } from 'react-native-camera';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  ToastAndroid
} from 'react-native';

import {
  Colors
} from 'react-native/Libraries/NewAppScreen';
import Dimensions from 'Dimensions';
import CameraRoll from "@react-native-community/cameraroll";

export default class App extends Component {
 constructor(props){
   super(props)
 }
  state = {
    barcodes: [],
  }
render(){
    const { height, width } = Dimensions.get('window');
    const maskRowHeight = Math.round((height - 500) / 20);
    const maskColWidth = (width - 300) / 2;
  return (
    <View style={styles.container}>
      <RNCamera
           ref={ref => {
             this.camera = ref;
           }}
           style={{
             flex: 1,
             width: '100%',
             justifyContent: "center"
           }}
         > 
         <View style={styles.maskOutter}>
            <View style={[{ flex: maskRowHeight  }, styles.maskRow, styles.maskFrame]} />
             <View style={[{ flex: 30 }, styles.maskCenter]}>
             <View style={[{ width: maskColWidth }, styles.maskFrame]} />
             <View style={styles.maskInner} />
            <View style={[{ width: maskColWidth }, styles.maskFrame]} />
          </View>
        <View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
      </View>         
      </RNCamera>
      <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center', backgroundColor: '#2E8B57', margin: 5}}>
          <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
            <Text style={{ fontSize: 14 }}> SNAP </Text>
          </TouchableOpacity>
        </View>
    </View>
  );
}
takePicture = async() => {
  if (this.camera) {
    const options = { quality: 0.5, base64: true };
    const data = await this.camera.takePictureAsync(options);
    console.log(data.uri);
    ToastAndroid.show(data.uri, ToastAndroid.LONG);
    if(data.uri!= null){
      console.log('not null')
    }else{
      console.log('null')
    }
    CameraRoll.saveToCameraRoll(data.uri);
  }

};
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#2E8B57",
    overflow: 'hidden',
    //width: 350,
    //height: 150,  
},
  camera: {
  flex: 1,
  alignItems: "center",
  justifyContent: "center"
},
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
  maskOutter: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  maskInner: {
    width: 300,
    //height: 300,
    backgroundColor: 'transparent',
    borderColor: '#DC143C',
    borderWidth: 1,
  },
  maskFrame: {
    backgroundColor: 'rgba(1,1,1,0.6)',
  },
  maskRow: {
    width: '100%',
  },
  maskCenter: { flexDirection: 'row' },
});

标签： androidreact-native