To take a photo, this works for me with the cordova-plugin-camera that comes with a standard cordova install with Ionic2.
import { Camera, ImagePicker } from 'ionic-native';
.
.
.
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));
});
}
just be aware that cordova-plugin-camera doesn’t work in a browser. I build an apk via cordova build and test it on my phone.
I am working on the ImagePicker, and can get it to go to the gallery on my phone with the following code. But I cannot get it to pass the image to the display once picked yet.
pickImage() {
ImagePicker.getPictures({
maximumImagesCount: 2,
width: 300,
height: 300,
quality: 75
}).then((results) => {
this.toDataUrl(results[0], function(base64Img) {
this.base64Image = "data:image/jpeg;base64," + base64Img;
});
// this.getFileContentAsBase64(results[0], function (base64Image) {
// this.base64Image = "data:image/jpeg;base64," + 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();
}
Html:
<ion-card>
<img src="{{ base64Image }}" />
</ion-card>
Next, I cannot seem to get an image cropper to work, I have tried various, but am still working on it.
Hope this helps you.
