callstack / callstack/react-native-image-editor

Crop result wrong on iOS 16.3

Ouverte
#163 4 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
Kotlin
Étoiles
448
Forks
119
Merge moyen
1 j 11 h
PR mergées (30 j)
4

Description

## Environment

Phisical Device: iPhone 13 Pro Max
OS: iOS 16.2.7

Project:
"react-native": "0.74.3",
"@react-native-community/image-editor": "^4.2.0",
"expo": "~51.0.23",
"react-native-vision-camera": "^4.5.1",

## Description

**The crop result is outside what was expected**

*This code works perfectly in all other devices/emulators and OS versions, for both Android, iOS.

This bug only happen when I got a picture from react native vision camera, when picked with expo-image-picker, it works fine!

The green toast in end of the video is:
Original Image Height and Image Width

Image crop area Height and Width
Position X and Y above the Image crop area

https://github.com/user-attachments/assets/ab1b5711-82ed-4dcc-88b7-6cec8b45e4f8

## Reproducible Demo

```javascript
const handlePress = async () => {
try {
setTranscriptionLoading(true);
const widthRatio = image.width / imageLayout.width;
const heightRatio = image.height / imageLayout.height;

const cropData: ImageCropData = {
offset: { x: cropX.value * widthRatio, y: cropY.value * heightRatio },
size: { width: cropWidth.value * widthRatio, height: cropHeight.value * heightRatio },
resizeMode: "cover",
format: "webp",
quality: Platform.OS === "ios" ? 0.5 : 0.9,
includeBase64: false,
};

const croppedImageUri: CropResult = await ImageEditor.cropImage(image.uri, cropData);

handleTranscription(croppedImageUri);
} catch (error) {
console.error("Crop Error", error);
Toast.show({ type: "error", text1: "Erro ao processar imagem" });
}
};
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par le point d’entrée handlePress et son appel à ImageEditor.cropImage, puis comparez l’URI d’image produit par react-native-vision-camera avec celui d’expo-image-picker dans l’environnement iOS indiqué. Reproduisez le recadrage à l’aide des ratios et des données de recadrage fournis ; le travail est terminé lorsque le résultat correspond à la zone sélectionnée sur iOS sans provoquer de régression sur les autres plateformes.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
ios, javascript, react-native
Domaine
mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.