Offset not correct in some Android devices
duongdinh98 opened this issue ยท 10 comments
Environment
Android (Galaxy Note 10+ is OK but Huawei P20 not correctly cropped)
Description
Offset not correct in some Android devices
Reproducible Demo
// Crop square image
let cropOffset = {
x: 0,
y: (imgSize.height - imgSize.width) / 2,
};
ImageEditor.cropImage(photo.path, {
offset: cropOffset,
size: {
width: imgSize.width,
height: imgSize.width,
},
displaySize: {
width: imgSize.width,
height: imgSize.width,
},
resizeMode: 'contain',
}).then(croppedUrl => {
photo.path = croppedUrl;
if (cameraStore.mediaList.length < maxImage) {
cameraStore.appendMediaList([photo]);
CameraRoll.save(photo.path);
}
setLoading(false);
});
@duongdinh98 Could you provide video/image demo of what you see on Huawei P20 (I don't have such device for testing)
also an original image, version of @react-native-community/image-editor
Hi @retyui
I'm using "@react-native-community/image-editor": "^4.2.0",
This is demo video: https://www.youtube.com/shorts/gj6qNuNZVpA
In Galaxy Note 10+ and iPhone with this code above, it cropped square image perfectly like in camera preview screen, but on Huawei P20, it looks like crop without offset in the demo I shared
@duongdinh98 how do you create imgSize
obj ?
Here is what I did
import { Image as RNImage } from 'react-native';
export const getImageSize = (
uri: string,
): Promise<{ width: number; height: number }> => {
return new Promise((resolve, reject) => {
RNImage.getSize(
uri,
(imgWidth, imgHeight) => {
resolve({ width: imgWidth, height: imgHeight });
},
reject,
);
});
};
// camera obj from react-native-vision-camera
const photo = await camera.current.takePhoto(takePhotoOptions);
photo.path = `file://${photo.path}`;
const imgSize = await getImageSize(photo.path);
can you try to swap w & h resolve({ width: imgHeight, height: imgWidth })
?
Not work @retyui t
@duongdinh98 also, can you omit displaySize
prop from the params and check again
displaySize: {
width: imgSize.width,
height: imgSize.width,
},
@duongdinh98 also, can you omit
displaySize
prop from the params and check againdisplaySize: { width: imgSize.width, height: imgSize.width, },
Not work, I tried this before
@duongdinh98 Could you please log the next variables (from Galaxy Note 10+
& Huawei P20
)
const photo = await camera.current.takePhoto(takePhotoOptions);
// ^^^ - `photo` takePhoto result
const imgSize = await getImageSize(photo.path);
//. ^^^ `imgSize` - image size
I found issue, my getImageSize() function not correctly work in some Android devices, so it will return incorrect image size => cause crop incorrectly
To resolve, I swith to get image size from photo object return by react-native-vision-camera
const photo = await camera.current.takePhoto(takePhotoOptions);