I'm working with Ionic 3 and I'm trying to take a picture and saved it directly into the Gallery.
It works fine for Android but it crashes with iPhone and when I turn saveToPhotoAlbum to false, it works fine, So I realized that the problem is with this option.
I'm using the Docs Code:
home.ts:
const options: CameraOptions = {
quality: 100,
sourceType: PictureSourceType.CAMERA,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum:true,
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
this.selectedImage = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
In the Plugin's Docs, It is recommended to add those line to the:
config.xml
</platform>
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>need camera access to take pictures</string>
</edit-config>
<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
<string>need photo library access to get pictures from there</string>
</edit-config>
<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
<string>need location access to find things nearby</string>
</edit-config>
<edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
<string>need photo library access to save pictures there</string>
</edit-config>
Related
Steps :
Click on camera button in app then camera open
take picture front/back picture dsiplay
selection option cancel or ok then I have click ok
app restart (means app open from start page with splase screen)
Notes :
My android version 11 [I am testing this code in android 11(MI device) and android 10(Motorola) devices]
All the permissions of camera access is 100% set.
The issue doesn't come in Android 10.
The issues comes in just Android 11.
This is my Code snippet
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
console.log("imageData ===> ",imageData);
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
console.log("errr",err);
this.utilServices.openForSuccessError({ value: false, message1: err});
// Handle error
});
I have an app that allows a user to select a photo from the gallery or take a photo via camera. I am trying to display an image that was taken via camera and it works fine, it returns a file path like
file:///Users/ray/Library/Developer/CoreSimulator/Devices/C8202B3B-300B-4819-8CD3-4C4AA690CE7C/ data/Applications/D82BF64E-6DD1-4645-B637-BCF65001FD29/tmp/cdv_photo_003.jpg
but when I try to select a photo from a gallery it shows a broken image thumbnail, and it turns a file path like.
content://com.android.providers.media.documents/document/image%3A21
Ionic CLI Version: PRO 4.2.1
Cordova Verion: 8.0.0
NPM Version: 6.4.1
Node.js version: 8.11.3
Platform: Android
I've also tried searching for a solution but it didn't work or I am still doing something wrong
Unable to load image when selected from the gallery on Android in phonegap
https://www.raymondcamden.com/2014/10/10/Cordova-the-Camera-plugin-AngularJS-and-Ninja-Cats
ionic cordova : how to display an image in img tag from android gallery when i get content:// url from filechooser plugin
Unable to load image when selected from the gallery on Android 4.4 (KitKat) using PhoneGap Camera Plugin
Some of them suggests using this code
if (imageURI.substring(0,21)=="content://com.android") {
photo_split=imageURI.split("%3A");
imageURI="content://media/external/images/media/"+photo_split[1];
}
but this solution is not that robust cause not all of the image sources returns the same file path that contains 'content://com.android' like the photos that came from Google Photos which returns 'content://com.google.android'
_Some of them also suggests using DATA_URL on destination type but it is memory intensive and may cause the app to crash_
Here is my code:
TS file
selectImage(sourceType) {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: true,
sourceType: sourceType
}
this.camera.getPicture(options).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
this.imagePreview = imageData;
}, (err) => {
this.toastCtrl.presentToast(err);
});
}
HTML File
<img src="{{imagePreview}}" />;
I hope someone could help me with this. Thank you in advance 💖.
ts:
public base64Image:string;
public getImage(){
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
this.base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
html:
<imge src={{base64Image}} />
Give this a try:-
//From Gallery
ChooseGallery() {
var _self=this;
const options: CameraOptions = {
allowEdit: true,
correctOrientation: true,
quality: 100, // picture quality
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM
}
this.camera.getPicture(options).then((ImageData) => {
_self.base64value = ImageData;
})
}
From Camera
ChooseCamera() {
var _self=this;
const options: CameraOptions = {
allowEdit: true,
correctOrientation: true,
quality: 100, // picture quality
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((ImageData) => {
_self.base64value = ImageData;
})
}
I hope this helps! Thanks!
Solved my problem using DomSanitizer https://devfanaticblog.com/working-with-camera-in-ionic-2-and-ionic-native/
let options: CameraOptions = {
quality: 100,
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
saveToPhotoAlbum: true,
correctOrientation: true,
encodingType: this.camera.EncodingType.JPEG,
destinationType: this.camera.DestinationType.FILE_URI
};
this.camera.getPicture(options).then((imageData) => {
let photo_split=imageData.split("%3A");
let photo_split2=photo_split[0].split("?");
let filename = photo_split2[0].substring(photo_split2[0].lastIndexOf('/')+1);
let path = photo_split2[0].substring(0,photo_split2[0].lastIndexOf('/')+1);
alert(photo_split2[0])
alert(filename)
alert(path)
this.file.readAsDataURL(path, filename).then(res=> {
alert("FUNCIONA!")
this.imageURI = res;
}).catch((reason) => {
alert(JSON.stringify(reason));
});
}).catch((reason) => {
alert(JSON.stringify(reason));
});
//HTML
<img alt="uploaded Image" [src]="imageURI">
How do you display a FILE_URI image taken by the user using #ionic-native/camera in Ionic 3?
I can use Ionic Native's Camera to get a FILE_URI image URL, with a result like this:
file:///var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/tmp/cdv_photo_005.jpg
However, When I try to display this image back to the user by referring to the URI in my view template, the image never loads.
Things I've tried:
-Using the image URI directly in the view
<img src="{{profile.image}}"> // Never loads
-Sanitizing the URI by including DomSanitizer in the page component:
<img [src]="domSanitizer.bypassSecurityTrustUrl(profile.image)"> // Never loads
I would rather not use a base64 image because of the performance drag. What am I doing wrong here?
import { normalizeURL } from 'ionic-angular'; ionic3 <img> tag src
<img *ngIf="base64Image" src="{{base64Image}}"/>
openCamera(pictureSourceType: any) {
let options: CameraOptions = {
quality: 95,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: pictureSourceType,
encodingType: this.camera.EncodingType.PNG,
targetWidth: 400,
targetHeight: 400,
saveToPhotoAlbum: true,
correctOrientation: true
};
this.camera.getPicture(options).then(imageData => {
if (this.platform.is('ios')) {
this.base64Image = normalizeURL(imageData);
// Alternatively if the problem only occurs in ios and normalizeURL
// doesn't work for you then you can also use:
// this.base64Image= imageData.replace(/^file:\/\//, '');
}
else {
this.base64Image= "data:image/jpeg;base64," + imageData;
}
}, error => {
console.log('ERROR -> ' + JSON.stringify(error));
});
}
Hi try to use File Path ionic plugin
path = "file:///var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/tmp/cdv_photo_005.jpg";
this.filePath.resolveNativePath(path)
.then(filePath => console.log(filePath))
.catch(err => console.log(err));
Please read the documentation
https://ionicframework.com/docs/native/file-path/
You can use the below code for display the image
savePhotoClick = () =>{
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
this.base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
Then use the img tag for display
<img [src]="base64Image" *ngIf="base64Image" />
I am using a ionic v1 app deployed on an ipad running on ios 11. When I try to run the app in ipad and click on the camera button , nothing happens. It stays as it is. I tried to look for issues mentioned similar to ios 10 and added relevant tags for info.plst file and also added the cross frame security bypass. I looked around but could not any solution to this. I have raised this question only after trying out all possible solutions that were specific for $cordovaCamera not working on ios 10. Even I tried to use the navigator.camera.getPicture() instead of $cordovaCamera.getPicture() but that didnt work either.
In my view I have
<a ng-click="takePicture()" style="color:#fff;">
In controller I have
$scope.takePicture = function (options) {
var options = {
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
quality: 100,
targetWidth: 300,
targetHeight: 300,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false,
correctOrientation:true
};
$cordovaCamera.getPicture(options).then(function(imageData) {
console.log('here');
$scope.pictureUrl = "data:image/jpeg;base64," + imageData;
console.log(imageData);
$scope.img_update = 1;
}, function(err) {
console.log(err);
});
};
In the controller I have also injected $cordovaCamera.
In index.html I have added
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
In config.xml I have added these tags inside platform ios
<plugin name="cordova-plugin-camera" spec="~2.3.0">
<variable name="CAMERA_USAGE_DESCRIPTION" value="The app would like to access the camera when you attach photos to content." />
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value="The app would like to access the photo library when you attach images to content." />
</plugin>
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>need camera access to take pictures</string>
</edit-config>
<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
<string>need to photo library access to get pictures from there</string>
</edit-config>
<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
<string>need location access to find things nearby</string>
</edit-config>
<edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
<string>need to photo library access to save pictures there</string>
</edit-config>
Update latest ios and android version then start following steps.
Step 1) Run this command
ionic cordova plugin rm camera
ionic cordova plugin add cordova-plugin-camera --variable CAMERA_USAGE_DESCRIPTION="your usage message" --variable PHOTOLIBRARY_USAGE_DESCRIPTION="your usage message"
Step 2) Add Options like this
var options = {
// Size
quality: 80,
targetWidth: 1024,
targetHeight: 768,
// Actions
allowEdit: false,
correctOrientation: false,
saveToPhotoAlbum: false,
// iOS
popoverOptions: CameraPopoverOptions,
// Basic
encodingType: Camera.EncodingType.JPEG,
sourceType: Camera.PictureSourceType.CAMERA,
destinationType: this.platform.is('ios') ? Camera.DestinationType.FILE_URI : Camera.DestinationType.DATA_URL,
};
And you Done.
I am trying to invoke the camera and get the path of the taken picture to send it to my FTP.
I am getting error when I use chrome://inspect like
GET data:image/png;base64,file:///storage/sdcard0/Android/data/com.ionicframework.camera108827/cache/1462163674353.png net::ERR_INVALID_URL
I have successfully invoked the camera and taken the picture but I am getting the broken image.
here is my code fore getting the image path of my taken picture.
.controller('mycontroller',function($scope,$cordovaCamera){
$scope.takePicture = function(){
var options = {
quality : 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit : false,
encodingType: Camera.EncodingType.PNG,
targetWidth: 250,
targetHeight: 250,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function(imageURI) {
//$scope.image = "data:image/jpeg;base64," + imageData;
console.log('invokeing cordovaCamera');
$scope.image = "data:image/png;base64," + imageURI;
console.log($scope.image);
console.log(imageURI);
//$scope.apply();
}, function(err) {
// An error occured. Show a message to the user
});
};
});
in my index.html
<ion-content ng-controller="mycontroller">
<img ng-show="image !== undefined" ng-src="{{image}}">
<img ng-show="image === undefined" ng-src="http://placehold.it/250x250">
<button class="button" ng-click="takePicture()">Take Picture</button>
</ion-content>
The problem is on the this line
$scope.image = "data:image/png;base64," + imageURI;
It should be like this
$scope.image = imageURI;