How to take an image from the gallery in IONIC 3?
I am failed to take image from gallery using
How to take an image from the gallery in IONIC 3?
I am failed to take image from gallery using
You can do it using Native camera plugin.
.ts
//take Photo
takePhoto(sourceType:number) {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
sourceType:sourceType,
}
this.camera.getPicture(options).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
Note: You just need to call above method like:
this.takePhoto(0);//photo library
this.takePhoto(1);//camera
0 for photo library 1 for Camera
UI
Following the most vote answer, a quick snippets.
Define 2 options types:
private optionsCamera: CameraOptions = {
quality: 100,
targetWidth: 600,
sourceType: this.camera.PictureSourceType.CAMERA,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
private optionsGallery: CameraOptions = {
quality: 100,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
and when you call you method getPicture from camera
replace options object for the proper situation.
This is for camera
this.camera.getPicture(this.optionsCamera).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
console.log(err)
})
This is for gallery
this.camera.getPicture(this.optionsGallery).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
console.log(err)
})
try this:
TakeCamera() {
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;
this.photos.push(this.base64Image);
this.photos.reverse();
}, (err) => {
console.log(err);
});
}
Use image picker plugin:
getImage(){
let options = {
maximumImagesCount:1//select number of image default is 15
}
this.imagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
}
}, (err) => {
console.log("error: "+err);
});
}
Ref image picker