Javascript - отображение больших изображений, хранящихся локально

Question

Я следую учебному пособию по Ionic / Capacitor с Angular, и эта часть здесь вызывает у меня некоторые проблемы:

Plugins.Camera.getPhoto({
  quality: 50,
  source: CameraSource.Prompt,
  correctOrientation: true,
  width: 200,
  resultType: CameraResultType.Base64
})
  .then(image => {
    this.selectedImage = image.base64String;

С прямым доступом к шаблону selectedImage, например:

  <ion-img
          role="button"
          class="image"
          (click)="onImagePicked()"
          [src]="selectedImage"
          *ngIf="selectedImage"
  ></ion-img>

В частности, я получаю эту ошибку времени выполнения / браузера при съемке изображения: net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large) с URL, называемым ionic, являющимся http://localhost:4200/HUGE_BASE64_STRING

Теперь я подумал, что проблема может заключаться в сохранении изображения как base64 вместокапля в памяти. Но потом я наткнулся на этот вопрос:

Конвертировать BLOB-объект в base64

Так что, если бы я сделал

 var reader = new FileReader();
 reader.readAsDataURL(blob); 
 reader.onloadend = function() {
     var base64data = reader.result;                
 }

, я бы все равно преобразовал изображение втаким образом, огромный URL, нет? Итак, как правильно хранить большое изображение локально?

Я предполагаю, что это общий вопрос JS, а не специфический для ионной связи, поэтому тег JS

Answer 1

Учебное пособие, которое вы читаете, устарело, проверьте документы и это официальное учебное пособие

Base64 просто верните данные base64, которые не могут бытьотображается в теге img, как вы уже поняли.

Но есть тип результата DataUrl, который возвращает правильный URL-адрес данных, который можно использовать для отображения в теге img.

Answer 2

Checkout SourceCode на https://github.com/ionic-team/capacitor/blob/fc1150a1d2fe15d2ece34507c1deae4eb8b6b028/core/src/web/camera.ts#L46

Если вы укажете resultType: CameraResultType.Uri

Плагин будет URL.createObjectURL (PhotoBlob)

(* aprox: возьмите PhotoBlob и создайте URL, который будет обслуживать его из памяти). Так что вам нужно только прикрепить его к источнику изображения.

Если вы используете FileReader.readAsDataURL () Плагин будет читать поток с камеры и создавать URL-адрес данных Base64 (data: content.typeOfImage / base64), который вы также можете поместить в поле src, затем img декодирует строку и отображает ее.

Если вы используете CameraResultType.Base64, плагин будет читать поток с камеры и генерировать только строку base64, а не URL-адрес данных. Если вам известен тип содержимого изображения, вы можете создать URL-адрес данных путем конкатенации и получить его (data: content.typeOfImage / base64).

Answer 3

Установка правильного префикса решила проблему;когда вы извлекаете base64, у него должен быть такой префикс, как этот, иначе некоторые фреймворки могут добавить к нему базовый URL:

    this.selectedImage = 'data:image/jpeg;base64,' + image.base64String;