Как отобразить изображение base64 на iPhone в Ionic 4

Я использую плагины Capacitor для получения файла изображения (с камеры или галереи). ПК и Android работают нормально, но код дает сбой на iPhone.

Он открывает галерею, я хватаю изображение, и оно вылетает при попытке отобразить

Я проверил разрешения, и они все установлены. Почему вылетает только на ios? Это проблема со строкой? Безопасность?

HTML:

< ion-img role="button" class="image" [src]="selectedImage" *ngIf="selectedImage" >

КОД ТС:

Plugins.Camera.getPhoto({
    quality: 100,
    source: CameraSource.Prompt,
    correctOrientation: true,
    allowEditing: false,
    resultType: CameraResultType.Base64
})
 .then(image => {
      this.selectedImage = image.base64Data; // VAR TO DISPLAY IN HTML
  })

Журнал ошибок https://i.imgur.com/jrSgGeW.jpg

Изменить: теперь я использую DomSanitizer и SafeResourceUrl для переменной. Ошибка прекратилась, но изображение не отображается


ionic-framework angular ionic4 capacitor
person Lucas Leandro    schedule 21.05.2019    source источник

Ответы (5)


arrow_upward
4
arrow_downward

Изменить эту строку

this.selectedImage = "data:image/jpeg;base64, " + image.base64Data;
person Kabir    schedule 22.05.2019

arrow_upward
2
arrow_downward

Поскольку вы хотите отобразить изображение и не использовать данные base64, используйте DataUrl resultType.

Для вашего примера кода это должно быть

Plugins.Camera.getPhoto({
    quality: 100,
    source: CameraSource.Prompt,
    correctOrientation: true,
    allowEditing: false,
    resultType: CameraResultType.DataUrl
})
 .then(image => {
      this.selectedImage = image.dataUrl; // VAR TO DISPLAY IN HTML
 })

Но также, поскольку вы используете Angular, рекомендуется очистить данные, это должно быть примерно так:

this.selectedImage = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));

Посмотрите полный пример ionic angular здесь https://capacitor.ionicframework.com/docs/guides/ionic-framework-app

person jcesarmobile    schedule 22.05.2019
comment
Привет, спасибо за ответ. Я уже следил за этими документами... та же проблема - person Lucas Leandro; 22.05.2019
comment
Можете ли вы предоставить образец проекта? Этот код работает нормально для меня. Также какая версия iOS у тестируемого вами устройства? - person jcesarmobile; 22.05.2019

arrow_upward
2
arrow_downward

HTML:

<img class="ox-picture" [src]="display(b64)"/>

TS : 

constructor(public dms: DomSanitizer) {}

display(b64: string) {
  return this.dms.bypassSecurityTrustUrl("data:image/jpeg;base64," + b64);
}
person V. Pivet    schedule 22.05.2019

arrow_upward
1
arrow_downward

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

Кордова:

const options: CameraOptions = {
      quality: 75,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,
      correctOrientation: true,
      targetHeight: 1024,
      targetWidth: 768
    }

Конденсатор:

const image = await Camera.getPhoto({ 
       quality: 75,//Test
       source: CameraSource.Prompt,
       correctOrientation: true,
       allowEditing: false,
       resultType: CameraResultType.Base64
       height : 1024,//Test
       width : 768//Test
    }

Документация по конденсаторам здесь.

person Stephen Romero    schedule 22.05.2019

arrow_upward
0
arrow_downward

Из официальной документации:

Составная часть:

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) => {
 // imageData is either a base64 encoded string or a file URI
 // If it's base64 (DATA_URL):
 let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
 // Handle error
});
}

HTML

<img src={base64Image} />
person Khurshid Ansari    schedule 22.05.2019
comment
Это для ионной основы. для конденсатора capacitor.ionicframework.com/docs/apis/camera - person Khurshid Ansari; 22.05.2019