I am having trouble displaying the selected or captured image on the page after uploading it through two methods - one using the gallery and the other using the camera.
** Here is my code **
1) profile.html:
<img class="profile-picture" src="{{baseUrl + 'service/renderImage/' +
profId}}" (click)="changePicture()">
<h6 secondary>{{ 'TAP_ON_IMAGE' | translate }}</h6>
2) profile.ts:
import { Component } from '@angular/core';
import { PhotoViewer, ActionSheet, Camera, Transfer, Base64ToGallery } from 'ionic-native';
import { NavController, Platform, NavParams, AlertController } from 'ionic-angular';
import { LogDetails, ProfileDetails, serviceUrl } from '../../services/root-scope';
import { Http } from '@angular/http';
import { HomePage } from '../home/home';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'page-profile',
templateUrl: 'profile.html'
})
export class ProfilePage {
base64Image: string;
public profId: any;
public baseUrl: any;
public data: any;
public translate: any;
constructor(public navCtrl: NavController, http: Http, public navParams: NavParams, public alertCtrl: AlertController, translate: TranslateService)
{
this.profId = ProfileDetails.profileId;
this.baseUrl = serviceUrl.baseUrl;
this.translate = translate;
this.data = {};
}
//this is my function
changePicture() {
console.log("changePicture called");
let buttonLabels = [this.translate.get("VIEW_IMAGE").value, this.translate.get("CHANGE_IMAGE").value];
ActionSheet.show({
'title': this.translate.get("WHAT_DO_YOU_WANT_WITH_THIS_IMAGE").value,
'buttonLabels': buttonLabels,
'addCancelButtonWithLabel': this.translate.get("CANCEL").value,
'addDestructiveButtonWithLabel': this.translate.get("DELETE").value
}).then((buttonIndex: number) => {
//alert('Button pressed: ' + buttonIndex);
if (buttonIndex == 2) {
try {
/*Base64ToGallery.base64ToGallery(this.baseUrl + 'service/renderImage/' + this.profId, 'img_').then(
res => {
console.log('Saved image to gallery ', res);
PhotoViewer.show(res, this.name, { share: true })
},
err => {
console.log('Error saving image to gallery ', err);
}
);*/
PhotoViewer.show(this.baseUrl + 'service/renderImage/' + this.profId, this.name, { share: false })
}
catch (err) {
console.log("Error in rendering image : "+err.message);
}
}
else if(buttonIndex == 3) {
//alert("buttonIndex : " + buttonIndex);
let alert = this.alertCtrl.create();
alert.setTitle(this.translate.get("CHOOSE_PHOTO_TYPE").value);
alert.addInput({
type: 'radio',
label: this.translate.get("CAMERA").value,
value: '1',
checked: true
});
alert.addInput({
type: 'radio',
label: this.translate.get("GALLERY").value,
value: '2',
checked: false
});
alert.addButton(this.translate.get("CANCEL").value);
alert.addButton({
text: this.okBtn,
handler: data => {
console.log("received data : ", data);
var options;
if (data == '1') {
options = {
allowEdit: true,
correctOrientation: true,
saveToPhotoAlbum: true
}
}
else if (data == '2') {
options = {
sourceType: 2,
allowEdit: true,
correctOrientation: true,
saveToPhotoAlbum: true
}
}
console.log("options : ", options);
Camera.getPicture(options)
.then((imageData)=>{
this.base64Image = "data:image/jpeg;base64," + imageData;
let cameraImageSelector = document.getElementById('camera-image');
cameraImageSelector.setAttribute('src', this.base64Image);
})
.catch(err=>{
console.log(err);
})
}
});
alert.present();
}
});
}
I want to upload the image using two methods one using gallery & another one using a camera. However, I am facing an issue where the selected or captured image is not displaying on the page.
Thanks in advance!