Показать изображение из галереи

Question

У меня есть приложение, которое позволяет пользователю выбрать фотографию из галереи или сделать фотографию с помощью камеры.Я пытаюсь отобразить изображение, которое было снято с помощью камеры, и оно работает нормально, оно возвращает путь к файлу, например

file:///Users/ray/Library/Developer/CoreSimulator/Devices/C8202B3B-300B-4819-8CD3-4C4AA690CE7C/ data/Applications/D82BF64E-6DD1-4645-B637-BCF65001FD29/tmp/cdv_photo_003.jpg

, но когда я пытаюсь выбрать фотографию из галереи, она показывает уменьшенное изображение, уменьшенное изображение,и он превращает путь к файлу, как.

content://com.android.providers.media.documents/document/image%3A21

Ионная версия CLI: PRO 4.2.1

Cordova Verion: 8.0.0

Версия NPM: 6.4.1

Версия Node.js: 8.11.3

Платформа: Android

Я также пытался найти решение, но оно не сработало, или я все еще делаю что-то не так

• Невозможно загрузить изображение, когдавыбрано из галереи на Android в phonegap

• https://www.raymondcamden.com/2014/10/10/Cordova-the-Camera-plugin-AngularJS-and-Ninja-Cats

• ionic cordova: как отобразить изображение в теге img изГалерея Android, когда я получаю контент: // url из плагина filechooser

• Невозможно загрузить изображение, если оно выбрано из галереи на Android 4.4 (KitKat) с помощью PhoneGapПлагин камеры

Некоторые из них предлагают использовать этот код

if (imageURI.substring(0,21)=="content://com.android") {
  photo_split=imageURI.split("%3A");
  imageURI="content://media/external/images/media/"+photo_split[1];
}

, но это решение не настолько серьезная причинане все источники изображений возвращают один и тот же путь к файлу, который содержит «content: //com.android», как фотографии, полученные с Google Photos , которая возвращает «content: //com.google.android'*»1061 *

_Некоторые из них также предлагают использовать DATA_URL для тип назначения , но это занимает много памяти и может привести к сбою приложения.

Вотмой код:

файл TS

selectImage(sourceType) {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,
      sourceType: sourceType
    }

    this.camera.getPicture(options).then((imageData) => {
     let base64Image = 'data:image/jpeg;base64,' + imageData;
     this.imagePreview = imageData;
    }, (err) => {
      this.toastCtrl.presentToast(err);
    });
  }

HTML-файл

<img src="{{imagePreview}}" />;

Я надеюсь, что кто-то может помочь мне сэтот.Заранее спасибо ?.

---

ПОЖАЛУЙСТА, ПОМОГИТЕ !!!ПОЖАЛУЙСТА ...

Answer 1

let options: CameraOptions = {
  quality: 100,
  sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
  saveToPhotoAlbum: true,
  correctOrientation: true,
  encodingType: this.camera.EncodingType.JPEG,
  destinationType: this.camera.DestinationType.FILE_URI
};

this.camera.getPicture(options).then((imageData) => {
  let photo_split=imageData.split("%3A");
  let photo_split2=photo_split[0].split("?");
  let filename = photo_split2[0].substring(photo_split2[0].lastIndexOf('/')+1);
  let path =  photo_split2[0].substring(0,photo_split2[0].lastIndexOf('/')+1);

  alert(photo_split2[0])
  alert(filename)
  alert(path)
  this.file.readAsDataURL(path, filename).then(res=> {
    alert("FUNCIONA!")
    this.imageURI = res;
  }).catch((reason) => {
    alert(JSON.stringify(reason));
  });
}).catch((reason) => {
  alert(JSON.stringify(reason));
});

// HTML

    <img alt="uploaded Image" [src]="imageURI">

Answer 2

Попробуйте: -

   //From Gallery
     ChooseGallery() {
        var _self=this;
        const options: CameraOptions = {
          allowEdit: true,
          correctOrientation: true,
          quality: 100, // picture quality
          destinationType: this.camera.DestinationType.FILE_URI,
          encodingType: this.camera.EncodingType.JPEG,
          sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM
        }
        this.camera.getPicture(options).then((ImageData) => {
          _self.base64value = ImageData;
        })
      }

С камеры

  ChooseCamera() {
    var _self=this;
    const options: CameraOptions = {
      allowEdit: true,
      correctOrientation: true,
      quality: 100, // picture quality
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    this.camera.getPicture(options).then((ImageData) => {
      _self.base64value =  ImageData;
    })
  }

Надеюсь, это поможет!Спасибо!

Answer 3

Решил мою проблему, используя DomSanitizer https://devfanaticblog.com/working-with-camera-in-ionic-2-and-ionic-native/

Answer 4

ts:

public base64Image:string; 
public getImage(){
const options: CameraOptions = {
  quality: 100,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
}

this.camera.getPicture(options).then((imageData) => {
 this.base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
 // Handle error
});
}

html:

<imge src={{base64Image}} />