Question

我试图显示其网址来自Flickr照片搜索API的图片。我想将这些图像URL转换为base64，这样我就可以将图像存储在会话存储中，只有在会话存储中不存在图像时才调用Flickr API：

＆＃13;

export class AComponent {

    results: any[];
    base64;
    constructor(private http: HttpClient, private jsonp: Jsonp, private router: Router,
        private storage: SessionStorageService) {

        if (!sessionStorage.getItem("results")) {
       
            this.http.get('https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=378060923d01ccb122bd53491163355d&tags=jungle&per_page=5&format=json&nojsoncallback=1').subscribe(data => {

                this.results = (<RootObject>data).photos.photo.map((photo) => {

                    return {
                        // url:`https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}_m.jpg`,
                        base64: this.base64, // this line how can I get base64 image from the above url
                        title: photo.title
                    }

                });
                sessionStorage.setItem("results", JSON.stringify(this.results));
            });
        }
        else {

            this.results = JSON.parse(sessionStorage.getItem("results"))
        }

    }

}

＆＃13;

Answer 1

您应该在GET-Request设置中设置responseType: ResponseContentType.Blob，因为这样您就可以将图像作为blob获取并在以后转换为base64编码的源。你上面的代码不好。如果您想要正确执行此操作，请创建单独的服务以从API获取图像。因为在组件中调用HTTP-Request是不错的。

以下是一个工作示例：

创建image.service.ts并输入以下代码：

    getImage(imageUrl: string): Observable<File> {
        return this.http
            .get(imageUrl, { responseType: ResponseContentType.Blob })
            .map((res: Response) => res.blob());
    }

现在您需要在image.component.ts中创建一些功能来获取图像并以html格式显示。

要从Blob创建图片，您需要使用JavaScript FileReader。这是创建新FileReader并听取FileReader的load-Event的函数。结果，此函数返回base64编码的图像，您可以在img src-attribute：

中使用它

imageToShow: any;

createImageFromBlob(image: Blob) {
       let reader = new FileReader();
       reader.addEventListener("load", () => {
          this.imageToShow = reader.result;
          // here you can save base64-image to session/localStorage
          localStorage.setItem('yourKey', this.imageToShow);
       }, false);

       if (image) {
          reader.readAsDataURL(image);
       }
}

在createIamgeFromBlob() - 功能中，您可以按键将base64-image保存到sessionStorage / localStorage。如果上面的示例不起作用，请尝试将结果转换为字符串。例如：localStorage.setItem('yourKey', this.imageToShow.toString());。

现在您应该使用创建的ImageService从api获取图像。您应该订阅数据并将此数据提供给createImageFromBlob - 函数。这是一个示例函数：

getImageFromService() {
      this.isImageLoading = true;
      this.imageService.getImage(yourImageUrl).subscribe(data => {
        this.createImageFromBlob(data);
        this.isImageLoading = false;
      }, error => {
        this.isImageLoading = false;
        console.log(error);
      });
}

现在，您可以在HTML模板中使用imageToShow - 变量，如下所示：

<img [src]="imageToShow"
     alt="Place image title"
     *ngIf="!isImageLoading; else noImageFound">
<ng-template #noImageFound>
     <img src="fallbackImage.png" alt="Fallbackimage">
</ng-template>

我希望这个描述清楚易懂，您可以在项目中使用它。

Answer 2

loadImage(imageUrl) {
  const self = this;

  const xhr = new XMLHttpRequest()
  xhr.open("GET", imageUrl);
  xhr.responseType = "blob";
  xhr.send();
  xhr.addEventListener("load", function() {
      var reader = new FileReader();
      reader.readAsDataURL(xhr.response); 
      reader.addEventListener("loadend", function() {             
          self.base64Img = reader.result;
      });
  });
}

链接到plunker

为了让猎人工作，你需要一个有效的cors成像。我使用了Chrome扩展程序。

在示例代码中，我将结果存储在组件变量中。编码的64图像在reader.result。

摘自here

Answer 3

首先你必须创建Image url

imgUrl = `https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}.jpg`

ref

然后获取base64图像

   function toDataURL(url, callback) {
          var xhr = new XMLHttpRequest();
          xhr.onload = function() {
            var reader = new FileReader();
            reader.onloadend = function() {
              callback(reader.result);
            }
            reader.readAsDataURL(xhr.response);
          };
          xhr.open('GET', url);
          xhr.responseType = 'blob';
          xhr.send();
        }

        toDataURL(imgUrl, function(dataUrl) {
          console.log('RESULT:', dataUrl)
        })

最终代码

export class AComponent {

results: any[];
base64;
constructor(private http: HttpClient, private jsonp: Jsonp, private router: Router,
    private storage: SessionStorageService) {

    if (!sessionStorage.getItem("results")) {

        this.http.get('https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=378060923d01ccb122bd53491163355d&tags=jungle&per_page=5&format=json&nojsoncallback=1').subscribe(data => {
            let promises = (<RootObject>data).photos.photo.map((photo) => {
                return this.getBase64Photo(photo).then(base64Photo => {
                      return base64Photo;
                })
            }
            Promise.all(promises)
              .then(results => {
                this.results = results;
              })
              .catch(e => {
                console.error(e);
              })
            sessionStorage.setItem("results", JSON.stringify(this.results));
        });
    }
    else {

        this.results = JSON.parse(sessionStorage.getItem("results"))
    }

}

toDataURL(url, callback) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
          callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
      };
      xhr.open('GET', url);
      xhr.responseType = 'blob';
      xhr.send();
}

getBase64Photo(photo){
    return new Promise((resolve, reject) => {
        let url =`https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}_m.jpg`;
        let base64Data;
        this.toDataURL(url, (data)=>{
            resolve({
            base64: base64Data, // this line how can I get base64 image from the above url
            title: photo.title
            })
        })
      });
}

}

使用角度2从图像网址获取base64图像

3 个答案: