如何自动裁剪刚刚使用 react-native-camera 拍摄的图像

Question

我有一个捕捉银行卡的功能，如何在相机遮罩内裁剪银行卡的图像。我使用 react-native-camera 拍照，使用 BarcodeMask 制作蒙版。代码如下：

<View style={{flex: 1}}>
<RNCamera
ref={ref => {
this.camera = ref;
}}
style={
this.state.step == 3 ? styles.camview : styles.preview
}
type={this.state.typeCamera}
autoFocus={RNCamera.Constants.AutoFocus.on}
captureAudio={false}
onFacesDetected={res =>
this.checkStatusFace(res.faces[0])
}
onFaceDetectionError={res => {
console.log('loi vao', res);
                          }}
faceDetectionClassifications={
RNCamera.Constants.FaceDetection.Classifications.all
}
/>
<BarcodeMask
width={350}
height={250}
showAnimatedLine={false}
/>
<TouchableOpacity
onPress={this.takePicture.bind(this)}
style={styles.capture}>
<FontAwesome5 name="camera" size={40} />
</View>
    
    
takePicture = async () => {
console.log('Da chup anh');
if (this.camera) {
const options = {quality: 0.4, base64: true};
const data = await this.camera.takePictureAsync(options);
this.setState({
uriImage: data.base64,
viewImage: true,
});
console.log(data);
}
};

Answer 1

您必须使用第三方库来裁剪图像。您可以使用 https://github.com/callstack/react-native-image-editor 之类的东西来实现所需的功能。