I am developing an application for a project in React Native for which I need the following.
What I want to do in this code is that when a photo of a crop is clicked from the camera, by analyzing that photo, the information about where the insects and diseases are present in that crop is displayed in detail.
What I have tried:
import React, { useEffect, useRef, useState } from 'react';
import { Camera } from 'expo-camera';
import { shareAsync } from 'expo-sharing';
import * as MediaLibrary from 'expo-media-library';
import { SafeAreaView, View, Image, Button, StyleSheet,TouchableOpacity } from 'react-native';
export default function CameraScreen({ navigation }) {
const cameraRef = useRef();
const [hasCameraPermission, setHasCameraPermission] = useState();
const [hasMediaLibraryPermission,
setHasMediaLibraryPermission] = useState();
const [photo, setPhoto] = useState();
useEffect(() => {
(async () => {
const cameraPermission = await Camera.requestCameraPermissionsAsync();
const mediaLibraryPermission =
await MediaLibrary.requestPermissionsAsync();
setHasCameraPermission(cameraPermission.status === "granted");
setHasMediaLibraryPermission
(mediaLibraryPermission.status === "granted");
})();
}, []);
let takePic = async () => {
let options = {
quality: 1,
base64: true,
exif: false,
};
let newPhoto = await cameraRef.current.takePictureAsync(options);
setPhoto(newPhoto);
};
if (photo) {
let sharePic = () => {
shareAsync(photo.uri).then(() => {
setPhoto(undefined);
});
};
let savePhoto = () => {
MediaLibrary.saveToLibraryAsync(photo.uri).then(() => {
setPhoto(undefined);
});
};
return (
<SafeAreaView style={styles.container}>
<Image style={styles.preview}
source={{ uri: "data:image/jpg;base64," + photo.base64 }} />
<Button title="Share" onPress={sharePic} />
{hasMediaLibraryPermission ? <Button title="Save"
onPress={savePhoto} /> : undefined}
<Button title="Discard" onPress={() =>
setPhoto(undefined)} />
</SafeAreaView>
);
}
return (
<Camera style={styles.container} ref={cameraRef}>
{}
<View style={styles.circleButtonContainer}>
<TouchableOpacity style={styles.circleButton}
onPress={takePic}>
<View style={styles.circleButtonBorder} />
</TouchableOpacity>
</View>
</Camera>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer: {
backgroundColor: 'transparent',
alignSelf: 'center',
marginBottom: 20,
},
circleButtonContainer: {
position: 'absolute',
bottom: 20,
alignSelf: 'center',
},
circleButton: {
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
circleButtonBorder: {
width: 56,
height: 56,
borderRadius: 28,
borderWidth: 2,
borderColor: 'black',
position: 'absolute',
},
preview: {
alignSelf: 'stretch',
flex: 1,
},
});