Hi All,
I am trying to get a ImagePicker to work. I can get an Camera to work just fine, i.e. I can take a photo and display the base64 image on the screen.
<img src="{{ base64Image }}" />
I have the following code below.
-
I can get the
alert('xbase64Img1 = ' + base64Img);
to fire, but not thealert('xbase64Img2 = ' + base64Img);
. I have tried it with and without thethis.zone.run(() => {...});
, but it still does not reach the second alert. -
The ImagePicker only works if I first access the Camera, and allow permission for the app to access the camera. Is there anyway of getting the ImagePicker to work alone?
Can anyone please see what I am doing incorrectly?
Thanks
import { NavController, Platform } from āionic-angularā;
import { Component, NgZone } from ā@angular/coreā;
import { Camera, ImagePicker } from āionic-nativeā;
import { EmployeeService } from āā¦/service/EmployeeServiceā;
import { Employee } from āā¦/model/Employeeā;
import { UtilityService } from āā¦/utils/UtilityServiceā;
import { DummyDataService } from āā¦/utils/DummyDataServiceā;
declare var navigator: any;
@Component({
templateUrl: ābuild/pages/mycamera/mycamera.htmlā,
providers: [EmployeeService, UtilityService, DummyDataService]
})
export class MyCameraPage {
private postEmployeeData: String; private base64Image: string; private zone: any; private employeeService: EmployeeService = null; private utilityService: UtilityService = null; private employeeModel: Employee = null; private dummyDataService: DummyDataService = null;
constructor(employeeService: EmployeeService, utilityService: UtilityService, dummyDataService: DummyDataService) { this.base64Image = null; this.zone = new NgZone({ enableLongStackTrace: false }); this.employeeService = employeeService; this.utilityService = utilityService; this.dummyDataService = dummyDataService; }
cropImage() {
}
takePhoto() { Camera.getPicture({ destinationType: navigator.camera.DestinationType.DATA_URL, sourceType: navigator.camera.PictureSourceType.CAMERA, allowEdit: false, encodingType: navigator.camera.EncodingType.JPEG, targetWidth: 300, targetHeight: 300, quality: 75, saveToPhotoAlbum: false }).then(imageData => { this.zone.run(() => { this.base64Image = "data:image/jpeg;base64," + imageData; }); }, error => { console.log("ERROR -> " + JSON.stringify(error)); alert("ERROR: " + JSON.stringify(error)); }); }
pickImage() { ImagePicker.getPictures({ maximumImagesCount: 1, width: 300, height: 300, quality: 75 }).then((results) => { this.toDataUrl(results[0], function (base64Img) { alert('xbase64Img1 = ' + base64Img); this.zone.run(() => { alert('xbase64Img2 = ' + base64Img); this.base64Image = base64Img; alert('xthis.base64Image = ' + this.base64Image); }); }); }, (error) => { console.log("ERROR -> " + JSON.stringify(error)); alert("ERROR: " + JSON.stringify(error)); }); }
toDataUrl(url, callback) { var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = function () { var reader = new FileReader(); reader.onloadend = function () { callback(reader.result); } reader.readAsDataURL(xhr.response); }; xhr.open('GET', url); xhr.send(); }
saveImage() { this.employeeModel = this.dummyDataService.getDummyEmployee();
this.employeeModel.avatar = window.btoa(encodeURIComponent(this.base64Image)); this.employeeService.saveEmployee(this.employeeModel); }
}