Angular 7 + Firebase: доступ к изображению из источника заблокирован политикой CORS

Я пытаюсь преобразовать изображения из хранилища Firebase в строку base64, чтобы использовать ее в автономном режиме с моим приложением angular 7/ionic 4! (я использую angularfire2)

Но я получил сообщение об ошибке

Доступ к изображению по адресу 'https://firebasestorage.googleapis.com/v0/b/. ************************.jpg?alt=media&token=' from origin 'http://localhost:8100' заблокирован политикой CORS: в > запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin".

Я много искал, и большая часть того, что я нашел, это создание файла firebase.json и разрешение пересечения, но я не знаю, как это сделать с угловым

или другой установлен img.crossOrigin="anonymous", который я уже сделал, но проблема/ошибка все еще есть!!

Код для двух функций, отвечающих за преобразование URL-адреса изображения в base64

getBase64ImageFromURL(url: string) {
    return Observable.create((observer: Observer<string>) => {
      // create an image object
      let img = new Image();
      img.crossOrigin = "anonymous";

      img.src = url;
      if (!img.complete) {
        // This will call another method that will create image from url
        img.onload = () => {
          observer.next(this.getBase64Image(img));
          observer.complete();
        };
        img.onerror = (err) => {
          observer.error(err);
        };
      } else {
        observer.next(this.getBase64Image(img));
        observer.complete();
      }
    });
  }

  getBase64Image(img: HTMLImageElement) {
    // We create a HTML canvas object that will create a 2d image
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    // This will draw image    
    ctx.drawImage(img, 0, 0);
    // Convert the drawn image to Data URL
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  }

firebase javascript angular angularfire2 cross-origin-read-blocking
person hesham shawky    schedule 24.04.2019    source источник
comment
Вы можете попробовать stackoverflow.com/questions/49458696/   -  person skipperhoa    schedule 24.04.2019

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите отобразить базовое изображение 64, вам необходимо очистить URL-адрес, прежде чем использовать его в шаблоне.

import { DomSanitizer } from '@angular/platform-browser';

...
constructor( private sanitizer: DomSanitizer, .... ) {}
...

profilePicture(binImage)
{
    if(binImage != null)
    {
        var imageData = btoa(binImage);
        //console.log("Base64 Image: ",imageData);
        this.displayImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+imageData);
    }
}

в вашем шаблоне просто:

<div class="profile-picture big-profile-picture" *ngIf="displayImage">
    <img src="{{displayImage}}">
</div>
person Rohit Upadhyay    schedule 24.04.2019