web-dev-qa-db-ja.com

Angular 4/5 +のAPIから画像を取得しますか？

Angular 4.を開発するのは初めてです。表示画像に関するAPIからの応答を取得しているときに問題に直面しています。APIでは、画像ファイルに入力ストリームファイルがあります。ちゃんと。

誰でも解決できますか？

私はこれを試しました：

  • 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==ですが、形式が正しくありませんでした

これも試してみました：

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を使用してエンコードしていましたが、ラテン範囲ではないようなエラーになるはずです

angulartypescriptangular2-services
39
Karthic G

GET-Request設定でresponseType: ResponseContentType.Blobを設定する必要があります。これは、画像をblobとして取得し、後でbase64エンコードされたソースに変換できるためです。上記のコードは良くありません。これを正しく行いたい場合は、別のサービスを作成してAPIから画像を取得します。コンポーネントでHTTP-Requestを呼び出すのは良くないからです。

これが実際の例です：

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を使用する必要があります。

新しいHttpClientは、デフォルトでJSONを返します。他の応答タイプが必要な場合は、responseType: 'blob'を設定して指定できます。詳細については こちら をご覧ください。

画像を取得してhtmlで表示するには、image.component.tsに関数を作成する必要があります。

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;
   }, false);

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

ここで、作成したImageServiceを使用して、APIから画像を取得する必要があります。データをサブスクライブし、このデータをcreateImageFromBlob- 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- variableを次のように使用できます。

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

この説明がわかりやすく、プロジェクトで使用できることを願っています。

Angular 5+ here の作業例を参照してください。

118
Gregor Doroschenko

角度5：

 getImage(id: string): Observable<Blob> {
    return this.httpClient.get('http://myip/image/'+id, {responseType: "blob"});
}
9
user5134904