Hello,
I’m using Ionic 2’s native camera and file in my app. I want to access the content of the picture after it is taken. I installed cordova-plugin-camera and cordova-plugin-file however I’m really unclear about how to use the file plugin. Here’s my code:
takePicture() {
Camera.getPicture({
destinationType: Camera.DestinationType.FILE_URI,
saveToPhotoAlbum: true,
allowEdit: false
}).then((imageURI) => {
this.imageURI = imageURI;
var imagePath = imageURI.substr(0, imageURI.lastIndexOf('/') + 1);
var imageName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
File.readAsDataURL(cordova.file.applicationDirectory, imageName)
.then(function (base64Img) {
console.log(base64Img);
})
.catch(function (err: TypeError) {
console.log(err.message);
});
CordovaExif.readData(this.imageURI, function (exifObject) {
this.exif = exifObject;
console.log(exifObject);
});
}, (err) => {
console.log(err);
});
}
When I ran it on browser I got an error “Uncaught TypeError: Cannot assign to read only property ‘message’ of object ‘#’” and base64Img returned nothing. Also it doesn’t work on iOS. How to read the content of the picture after saving it on storage?
3 Likes
fredDS
December 2, 2016, 12:50am
2
Hi, have you found a solution to your problem. It could help, because I’m facing the same issue.
1 Like
I’m also looking how to use this method. Any ideas?
fredDS
April 11, 2017, 2:19pm
4
@dimitri320 @guoyangrui
There you go, try this.
takePicture() {
let options: CameraOptions = {
destinationType: Camera.DestinationType.NATIVE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.PNG,
targetHeight: 250,
targetWidth: 250,
allowEdit: true,
quality: 10,
saveToPhotoAlbum: false
};
Camera.getPicture(options).then((imageUri) => {
console.log('file received: ', imageUri);
let nameFile = imageUri.replace(cordova.file.externalCacheDirectory, '');
console.log('file name: ', nameFile);
File.readAsDataURL(cordova.file.externalCacheDirectory, nameFile).then(
file64 => {
console.log('file in 64: ', file64);
let fileWithoutExtension = ('' + file64 + '').replace(/^data:image\/(png|jpg);base64,/, '');
console.log(fileWithoutExtension);
}).catch(err => {
console.log('booooooo');
});
},
(err) => {
console.log('booooooo');
});
}
2 Likes
Hello, this is not working, I tried the same and it return the first error console.log(‘booooooo’); please help
console.log the error, not booo. Then you’ll know what you’re looking at.
1 Like
That shows this: [object Object]
This is my code
this.file.readAsDataURL(‘file:///storage/emulated/0/Download/imagenes-gif-para-fondos-para-celular.gif’, ‘imagenes-gif-para-fondos-para-celular’).then(result => {
this.imageUpload = result;
alert(result)
}, (err) => {
alert(err);
});
Thank you for your answer!
I don’t see console.log in the code you posted.
it is the alert(err) if I write console log instead, it will show it on the terminal but it shows the same, the alert or the console.log.
As you can see, now im using the console.log instead of the alert, is doing the same.
AdriCan:
[object Object]
JSON.stringify
may give more useful information.
AdriCan
August 30, 2017, 10:13pm
11
Than you! Now I have this, {“code”:13,“message”:“input is not a directory”}
Its better than before but I still dont understand whats my mistake xd
fredDS
August 31, 2017, 9:09am
12
Is this happened on android or ios device? because the directory to look into are different depending on device you’re using.
For example:
destinationType: (Platform.is('ios'))?this.camera.DestinationType.FILE_URI:this.camera.DestinationType.NATIVE_URI,
Hi did you got solution for this. As i’m getting same error that " input is not a directory "
AdriCan
October 18, 2017, 8:25am
14
3 Likes
Hi there ,
Can you share your total code , i got same error .
thanks ,
and which one should use , file.readasDataUrl or base64
Hey, in this tutorial we did an example of that! Hope it helps.
1 Like