File size: 1,785 Bytes
d9f5705 9c8790e d9f5705 9c8790e d9f5705 9c8790e d9f5705 9c8790e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import React, { useState, useEffect } from 'react';
import { View, Image, TouchableOpacity, Text } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { ImageEditor } from 'react-native';
const CropImage = () => {
const [croppedImage, setCroppedImage] = useState(null); // State to store the cropped image URI
useEffect(() => {
getPermission();
}, []);
const getPermission = async () => {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
alert('Permission denied!');
}
};
const handleSelectImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
});
if (!result.cancelled) {
cropImage(result.uri);
}
};
const cropImage = (imageUri) => {
const cropData = {
offset: { x: 100, y: 100 }, // x, y coordinates to start cropping
size: { width: 200, height: 200 }, // width, height of the cropped area
displaySize: { width: 200, height: 200 }, // desired width, height of the cropped image
resizeMode: 'contain', // resizing mode
};
ImageEditor.cropImage(
imageUri,
cropData,
(croppedURI) => {
// Handle the cropped image URI
console.log('Cropped image URI:', croppedURI);
setCroppedImage({ uri: croppedURI });
},
(error) => {
console.error('Error cropping image:', error);
}
);
};
return (
<View>
<TouchableOpacity onPress={handleSelectImage}>
<Text>Select Image</Text>
</TouchableOpacity>
{croppedImage && <Image source={croppedImage} style={{ width: 200, height: 200 }} />}
</View>
);
};
export default CropImage;
|