Reputation: 209
With the camera I take a set of photo like this:
const takePicture = useCallback(async () => {
try {
const picture = await camera.current.takePictureAsync({
quality: 0.4,
base64: false,
exif: false,
shutterSound: false,
skipProcessing: true,
});
images.current[step].push(picture);
} catch (error) {
console.error('Error taking or manipulating picture:', error);
}
}, [step]);
Then when all the photos are taken and reviewed by the user, he send them like this:
const manipulateImage = async imageUri => {
const convertedImage = await manipulateAsync(imageUri, [], { format: SaveFormat.WEBP });
return convertedImage.uri;
};
const handleSendScan = async () => {
setLoading(true);
try {
const images = Object.values(updatedImages).flat();
console.log('Number of images before processing:', images.length);
const formData = new FormData();
let totalSizeBeforeMB = 0;
for (const image of images) {
const response = await fetch(image.uri);
const blob = await response.blob();
totalSizeBeforeMB += blob.size / (1024 * 1024);
}
console.log('Total size before WebP conversion:', totalSizeBeforeMB.toFixed(2), 'MB');
let imageCount = 0;
let totalSizeAfterMB = 0;
for (const [index, image] of images.entries()) {
const convertedUri = await manipulateImage(image.uri);
const convertedResponse = await fetch(convertedUri);
const convertedBlob = await convertedResponse.blob();
totalSizeAfterMB += convertedBlob.size / (1024 * 1024);
formData.append('images', {
uri: convertedUri,
type: getFileMimeType(convertedUri),
name: `photo_${index}.${getFileExtension(convertedUri)}`,
});
imageCount++;
}
console.log('Number of images appended to FormData:', imageCount);
console.log('Total size after WebP conversion:', totalSizeAfterMB.toFixed(2), 'MB');
const messageSent = await API.postSendScan(user._id, formData);
if (messageSent.status === 201) {
setLoading(false);
navigation.navigate('Dashboard', { shouldRefresh: true });
} else {
setLoading(false);
Alert.alert('Error', 'Failed to send images');
}
} catch (error) {
console.error(error);
setLoading(false);
Alert.alert('Error', 'Failed to process or send images');
} finally {
await cleanCache();
route.params.updatedImages = {
close: [],
open: [],
topBottom: [],
openAligners: [],
};
}
};
The real function does not include every line to calculate and console.log the weight, I added them because the size of all the pictures seems to big and upon loggin the result I realize that it was because it was bigger. Here is how the log looks like:
Number of images before processing: 18
Total size before WebP conversion: 4.77 MB
Number of images appended to FormData: 18
Total size after WebP conversion: 11.00 MB
Am I doing something wrong, is it normal or is there properties about mobile phone that I'm not aware of?
Thank you.
Upvotes: 0
Views: 37