Как управлять изображением (обрезка и изменение размера) после создания фотографии или выбора фотографии из библиотеки с помощью ionic 5

#javascript #html #angular #ionic-framework

#javascript #HTML #angular #ionic-framework

Вопрос:

в принципе, мне нужно обработать изображение, которое я выбираю, прежде чем просматривать его на своем месте на HTML-странице. то, что я сделал до сих пор, — это таблица действий, в которой есть два варианта Загрузить изображение или выбрать изображение :

 async selectImage() {
const actionSheet = await this.actionSheetController.create({
header: 'Select Image source',
buttons: [{
  text: 'Load from Library',
  handler: () => {
    this.pickImage(this.camera.PictureSourceType.PHOTOLIBRARY);
  }
},
{
  text: 'Use Camera',
  handler: () => {
    this.pickImage(this.camera.PictureSourceType.CAMERA);
  }
},
{
  text: 'Cancel',
  role: 'cancel'
}
]
});
}
  

и это функция pickImage

 pickImage(sourceType) {
const options: CameraOptions = {
quality: 100,
sourceType,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
};
this.camera.getPicture(options)
.then((imageData) => {
this.crop.crop(imageData, {quality: 100 });
this.serviceps.logo = 'data:image/jpeg;base64,'   imageData;
}, error => console.error('Error cropping image', error));

}
  

итак, теперь, как я могу добавить обрезку и редактирование изображения сразу после его выбора? Я пытался со вчерашнего дня, но у меня не получилось.

Комментарии:

1. Используйте этот плагин: ionicframework.com/docs/native/crop

2. да, конечно, я использовал это, но у меня это не сработало. Спасибо

3. это потому, что вы получаете base64 поддержку этого плагина FILE_URI . Измените код вашей камеры с this.camera.DestinationType.DATA_URL на this.camera.DestinationType.FILE_URI .

4. Также уменьшите качество изображения. качество: 100 => quality: 50 Это уменьшит размер вашего изображения

5. @HassanAli это не работает:'((((((