Hi there!
I am trying to use ImageManipulator to crop an image using a placeholder in the camera but I pass the coordinates and it does not capture the image correctly.
const [overlay, setOverlay] = React.useState({});
const handlePick = async () => {
let photo = await this.camera.takePictureAsync({ exif: true });
transFormImage(photo);
};
const transFormImage = async photo => {
var ratio = overlay.width / photo.width;
const manipResult = await ImageManipulator.manipulateAsync(
photo.uri,
[
{
crop: {
originX: overlay.x,
originY: overlay.y,
width: overlay.width / ratio,
height: overlay.height / ratio
}
}
],
{
format: "jpeg",
compress: 0.9
}
);
setTransform(manipResult.uri);
};
<Camera
ref={ref => {
this.camera = ref;
}}
style={{
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center"
}}
>
<View
onLayout={event => {
const layout = event.nativeEvent.layout;
setOverlay(layout);
}}
style={{
position: "absolute",
left: 30,
top: 250,
backgroundColor: "red",
width: 140,
height: 40
}}
></View>
<Button
onPress={handlePick}>
<Text>Take picture</Text>
</Button>
</Camera>
Has anyone worked on something similar that can give me some guidance on where to continue?
Cheers