So this Code works perfect on android after taking a picture it opens the plugin crop where i can crop the image. The image gets stored on the local storage. From there i take it und convert it into base64 and send it to my php file where it get stored into a FTP server.
presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Choose...',
buttons: [
{
text: 'Camera',
handler: () => {
this.takePhoto();
console.log('Camera clicked');
}
},{
text: 'Gallery',
handler: () => {
this.pickImage();
console.log('Gallery clicked');
}
},{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
takePhoto() {
this.takeThePhoto(Camera.PictureSourceType.CAMERA);
}
pickImage() {
this.takeThePhoto(Camera.PictureSourceType.SAVEDPHOTOALBUM);
}
takeThePhoto(pictureSourceType): Promise<any> {
return new Promise((result, reject) => {
Camera.getPicture({
destinationType: Camera.DestinationType.FILE_URI,
mediaType: Camera.MediaType.ALLMEDIA,
sourceType: pictureSourceType,
targetWidth: 720,
encodingType: Camera.EncodingType.JPEG,
correctOrientation: true
}).then((fileUri) => {
// Crop Image, on android this returns something like, '/storage/emulated/0/Android/...'
// Only giving an android example as ionic-native camera has built in cropping ability
if (this.platform.is('ios')) {
/* Using cordova-plugin-crop starts here */
return reslove(Crop.crop(fileUri, { quality: 100 }));
//return fileUri
} else if (this.platform.is('android')) {
// Modify fileUri format, may not always be necessary
fileUri = 'file://' + fileUri;
/* Using cordova-plugin-crop starts here */
return reslove(Crop.crop(fileUri, { quality: 100 }));
}
})
.then((path) => {
// path looks like 'file:///storage/emulated/0/Android/data/com.foo.bar/cache/1477008080626-cropped.jpg?1477008106566'
//alert('Cropped Image Path!: ' + path);
this.loading = this.loadingCtrl.create({ content: 'Uploading Image...'});
this.loading.present();
return this.toBase64(path).then((base64Img) => {
this.postdataimage.base64img = base64Img;
this.http.post('http://service-lukas-reineleimage.php', this.postdataimage).subscribe((rsp) => {
this.changed = rsp.text();
if(this.changed == "notchanged")
{
//bildwurdenichtgeändert
}
else
{
this.postdataimage.profilepiclink = this.changed;
NativeStorage.setItem('loginprofilepicture', this.changed)
.then(() => console.log('Stored Login Data!'), error => console.error('Error storing Data', error));
this._zone.run(() => {
this.loadData();
});
}
this.loading.dismiss();
});
});
})
}
}
toBase64(url: string) {
return new Promise<string>(function (resolve) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function () {
var reader = new FileReader();
reader.onloadend = function () {
resolve(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
});
}
But as i said on iOS Crop doesnt get called because i only returned the file uri first like this:
if (this.platform.is('ios')) {
return fileUri
When im insert here the Crop Plugin so, if its a iOS Device, it should open Crop like it works on Android:
if (this.platform.is('ios')) {
return Crop.crop(fileUri, { quality: 100 });
But the Problem here is that the exactly same code works on Android but on iOS it does nothing.
On iOS it skips this step and upload the picture without Cropping first.
This Code works without any Errors on Android thats why i didnt handle Errors yet.
