You saved my day. Thank you
This works for me, thank you so much
The instruction are here
All you have to do is sanitize the path as
this.image = window.Ionic.WebView.convertFileSrc(imageData);
and it works like charm!!
In ionic v3,just like yours:
this.image = (<any>window).Ionic.WebView.convertFileSrc(imageData);
thanks, it works for me too
If I use ReadAsDataUrl, it works but it is very slow on Android to create the bae64 image. It takes 4 to 5 seconds for a medium resolution photo. The WebView solution is only in beta(?) so I am hesitant to use beta code.
What is so strange to me, is that the code below worked in an app I wrote in the spring of 2018. And it still works.
takePicture(opts: CameraOptions) {
this.camera.getPicture(opts).then((imageData) => {
this.myImage = imageData;
}, (err) => {
console.log(err);
});
}
I did notice the old native wrapper for @ionic-native/camera was 4.5.3. Now I am working with 4.17.0. My guess is that this new wrapper caused the code not to work. Any help is appreciated.
thankss alot , you make my day
Hi JALO!
I faced the same trouble after updating Ionic and adding A Blank App for Testing. The image was coming broken. I found a temporary solution by using the Earlier Ionic Blank Template and transferred the SRC and config.xml only. Then it worked. But it was a temporary fix.
After reading your post, I came to know about the Update related to FILE_URI.
Thanks A Lot
worked for me , thanks you saved my day.
Hey I solved that problem.I struggled 2 days for this problem.After that i had an idea.Why can we convert file uri to base64 image after that by using DomSanitizer we can easily set the base64 image tot he img src tag.Please follow below steps we can easily solve that problem
1.Install the base64 plugin
https://ionicframework.com/docs/native/base64/
2.By using base64 plugin we can convert file_uri to basse 64 image.
openCamera() {
const options: CameraOptions = {
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
targetWidth: 1000,
targetHeight: 1000,
correctOrientation:true
}
this.camera.getPicture(options).then((imageData) => {
this.base64.encodeFile(imageData).then((base64File: string) => {
this.base64Image =base64File;
}, (err) => {
console.log(err);
alert(err);
});
}, (err) => {
console.log(err);
})
}
3.Initialize DomSanitizer in constructor
constructor( private domSanitizer: DomSanitizer);
4.By using domsanitizer we can display the image in html page
<img [src]=“domSanitizer.bypassSecurityTrustUrl(base64Image)”>
Thanks a lot for this share !
you saved my day !
In ionic v3,just like yours:
this.image = (<any>window).Ionic.WebView.convertFileSrc(imageData);
this works for me
It works fine! Thanks
What does the extension -lc switch do ?
just save my day, thank you
this.image = (window).Ionic.WebView.convertFileSrc(imageData);
Thanks, nice great !!!
Thanks it works …
work for me too , thanks
It’s a good solution. You truly help save me a lot of time. Thank you.
in ionic 4 use this code working fine on android
/**
*take photo from Camera
**/
public async takeSubPhotoCamera(){
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: false,
correctOrientation: true,
}
await this.camera.getPicture(options).then((imageData: any) => {
this.myphoto = 'data:image/jpeg;base64,' + imageData;
this.previewImage(this.myphoto);
}, (err) => {
// Handle error
});
}
/**
*take photo from library
**/
public async takeSubFileLibrary() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
sourceType:0,
}
this.croppedImage = '';
await this.camera.getPicture(options).then((imageData : any) => {
this.myphoto = 'data:image/jpeg;base64,' + imageData;
this.previewImage(this.myphoto);
});
}