Take or select picture, crops images with aspect ratio and get base64.
- Install the Cordova and Ionic Native plugins:
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera
$ ionic cordova plugin add cordova-plugin-ratio-crop
$ npm install --save ionic-cordova-plugin-ratio-crop
- Add plugins to providers section on your app's module
import { RatioCrop } from 'ionic-cordova-plugin-ratio-crop';
import { Camera } from '@ionic-native/camera';
...
@NgModule({
declarations: [
MyApp
],
imports: [
...
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
...
Camera,
RatioCrop,
...
]
})
export class AppModule { }- Android
- iOS
import { Camera } from '@ionic-native/camera';
import { RatioCrop, RatioCropOptions } from 'ionic-cordova-plugin-ratio-crop';
...
private cropOptions: RatioCropOptions = {
quality: 75,
targetWidth: 1080,
targetHeight: 1080,
widthRatio: -1,
heightRatio: -1
};
...
constructor(
private camera: Camera,
private crop: RatioCrop) { }
...
takePicture() {
return this.camera.getPicture({
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.CAMERA,
allowEdit: false,
correctOrientation: true
})
.then((fileUri) => {
return this.crop.ratioCrop(fileUri, this.cropOptions);
})
.then((path) => {
return this.encodeToBase64(path);
})
}
selectPicture() {
return this.camera.getPicture({
allowEdit: false,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
mediaType: this.camera.MediaType.PICTURE,
destinationType: this.camera.DestinationType.FILE_URI
})
.then((fileUri) => {
return this.crop.ratioCrop(fileUri, this.cropOptions);
})
.then((path) => {
return this.encodeToBase64(path);
})
}
encodeToBase64(src) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
let reader = new FileReader();
reader.onloadend = function () {
resolve(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', src);
xhr.responseType = 'blob';
xhr.send();
});
}
- https://github.com/peterantonyrausch/cordova-plugin-ratio-crop
- https://github.com/peterantonyrausch/ratio-crop
- https://github.com/apache/cordova-plugin-camera
- https://github.com/jeduan/cordova-plugin-crop
- https://github.com/obeza/cordova-plugin-crop-with-ratio
- https://github.com/qwerqwermhc/Crop
"No Image Selected" error on Android 4.4 device. (Camera Plugin + Background Mode Plugin)