Camera.getPhoto produces green/red color tint on the most of devices when converting to Base64 from Uri #2471
Description
Bug Report
Plugin(s)
@capacitor/camera: "7.0.0"
Capacitor Version
Latest Dependencies:
@capacitor/cli: 8.0.2
@capacitor/core: 8.0.2
@capacitor/android: 8.0.2
@capacitor/ios: 8.0.2
Installed Dependencies:
@capacitor/cli: 7.4.3
@capacitor/core: 7.4.3
@capacitor/android: 7.4.3
@capacitor/ios: 7.4.3
Platform(s)
IOS - Android
Current Behavior
When using @capacitor/camera in an Ionic/Angular app, photos captured from the device camera appear with a green/red color tint on all devices.
This happens even though we are correctly using:
resultType: CameraResultType.Uri
The image looks normal in the native camera, but after reading it as Base64 inside the app, the colors become distorted (greenish / reddish overlay).
examples
https://iscope.syadtech.com:5004/Assets/iScope2/visit05/20261/7ad188e7-765.jpeg
https://iscope.syadtech.com:5004/Assets/iScope2/visit32/20261/7121db16-a0e.jpeg
look at the green and red shades in the photo
Code Reproduction
async selectImage(type: CameraSource) {
let finalImage: LocalFile;
const image = await Camera.getPhoto({
quality: this.plt.is('ios') ? 30 : 30 ,
// quality: 3 ,
promptLabelHeader:this.language === 'en'?'Choose the action':'اختر الإجراء',
promptLabelPhoto:this.language === 'en'?'Gallery':'المعرض',
promptLabelPicture:this.language === 'en'?'Camera':'الكاميرا',
allowEditing: false,
resultType: CameraResultType.Uri,
source: type,
saveToGallery: true,
});
console.log('photo raw', image);
if (image) {
const fileName = ${this.sharedService.createGUID(12)}.jpeg;
const base64Data = await this.readAsBase64(image);
const imagePath = await image.webPath;
finalImage = {
name: fileName,
data: base64Data,
mimeType: this.fileManagementService.getMimeTypeFromFormat(
image.format
),
imagePath
};
}
return finalImage;
}
async readAsBase64(photo: Photo) {
if (this.plt.is('hybrid')) {
const file = await Filesystem.readFile({
path: photo.path,
});
const base64Data = data:image/${photo.format};base64,${file.data};
return base64Data;
} else {
// Fetch the photo, read as a blob, then convert to base64 format
const response = await fetch(photo.webPath);
const blob = await response.blob();
return (await this.convertBlobToBase64(blob)) as string;
}
}
<ion-img [src]="img.data " >
Additional Context
when capturing photo it looks good in the preview but when add it to the app the colors damaged
and here is examples of photos on camera and after submitting it to application
