从Angular 4/5 +中的API获取图像? [英] Getting Image from API in Angular 4/5+?

问题描述

我刚开发了Angular4.我在从API获得有关显示图像的响应时遇到了问题.在API中，图像文件具有输入流文件，我不知道如何检索和正确显示它.

I have new to develop Angular 4. I have facing issue while getting response from API about display image.In API,an image file has input-stream file,I don't know how to retrieve it and display it properly.

任何人都可以解决吗?

我尝试过:

• Image.Component.ts:

this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769')
         .subscribe((response) => { var blob = new Blob([response.text()], {type: "image/png"});
           console.log(blob);
           console.log(window.btoa(blob.toString()));           
});

此结果=> W29iamVjdCBCbG9iXQ==，但格式不正确

Result of this => W29iamVjdCBCbG9iXQ== , but it was not correct format

并且还尝试了此操作

this.http.get('http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769').map(Image=>Image.text())
  .subscribe(data => {
    console.log((data.toString()));   
});

这样的结果=>

 ����\ExifII*��7                                                      ��DuckyK��fhttp://ns.adobe.com/xap/1.0/<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.3-c011 66.145661, 2012/02/06-14:56:27        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmpMM:OriginalDocumentID="xmp.did:0280117407206811A2188F30B3BD015B" xmpMM:DocumentID="xmp.did:E2C71E85399511E7A5719C5BBD3DDB73" xmpMM:InstanceID="xmp.iid:E2C71E84399511E7A5719C5BBD3DDB73" xmp:CreatorTool="Adobe Photoshop CC 2014 (Windows)"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:7092a9cd-b3fd-bb49-b53c-9b6e1aa1ac93" stRef:documentID="adobe:docid:photoshop:40615934-3680-11e7-911d-f07c687d49b8"/> <dc:rights> <rdf:Alt> <rdf:li xml:lang="x-default">                                                      </rdf:li> </rdf:Alt> </dc:rights> <dc:creator> <rdf:Seq/> </dc:creator> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>���Photoshop 3.08BIMJZ%Gt6                                                      8BIM%�<".}��νz��܌��Adobed����  

但是我曾经使用window.btoa进行编码，它应该像不是拉丁范围那样错误

but I used to encode using window.btoa it should be error like not latin range

推荐答案

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

You should set responseType: ResponseContentType.Blob in your GET-Request settings, because so you can get your image as blob and convert it later da base64-encoded source. You code above is not good. If you would like to do this correctly, then create separate service to get images from API. Beacuse it ism't good to call HTTP-Request in components.

这是一个可行的示例:

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

角度4:

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

Angular 5 +:

getImage(imageUrl: string): Observable<Blob> {
  return this.httpClient.get(imageUrl, { responseType: 'blob' });
}

重要提示:自Angular 5+起，您应该使用新的HttpClient.

Important: Since Angular 5+ you should use the new HttpClient.

新的HttpClient默认情况下返回JSON.如果需要其他响应类型，则可以通过设置responseType: 'blob'来指定.在此处了解更多信息.

The new HttpClient returns JSON by default. If you need other response type, so you can specify that by setting responseType: 'blob'. Read more about that here.

现在，您需要在image.component.ts中创建一些函数以获取图像并将其显示为html.

Now you need to create some function in your image.component.ts to get image and show it in html.

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

For creating an image from Blob you need to use JavaScript's FileReader. Here is function which creates new FileReader and listen to FileReader's load-Event. As result this function returns base64-encoded image, which you can use in img src-attribute:

imageToShow: any;

createImageFromBlob(image: Blob) {
   let reader = new FileReader();
   reader.addEventListener("load", () => {
      this.imageToShow = reader.result;
   }, false);

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

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

Now you should use your created ImageService to get image from api. You should to subscribe to data and give this data to createImageFromBlob-function. Here is an example function:

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变量:

Now you can use your imageToShow-variable in HTML template like this:

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

我希望此说明易于理解，并且可以在您的项目中使用.

I hope this description is clear to understand and you can use it in your project.

请参见Angular 5+的工作示例此处.

See the working example for Angular 5+ here.

这篇关于从Angular 4/5 +中的API获取图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！