レスポンスから画像データを抽出する：Angular2

Question

レスポンスに画像データがありますが、レスポンスからレスポンスを抽出できません。

CLIENTコード -

download() { 
    this._http.get('http://localhost:9000/download/' + this._fileid) 
    .subscribe(
    data => { 
     this.image = data; 
    }, 
    err => console.log('Error is..:' + err) 
    ); 
} 

サーバコード -

app.get('/download/:fileid', function(req, res) { 
    var id = req.params.fileid; 
    res.set('Content-Type', 'image/jpeg'); 
    gfs.createReadStream({_id: id}).pipe(res); 
}); 

[EDIT] - 私はCustomXhrを使用するために自分のコードを適応してきたが、私はデータのない空のBLOBを取得しかし。

CUSTOM XHRコード -

@Injectable() 
export class CustomBrowserXhr extends BrowserXhr { 
    build(): any { 
    let xhr = super.build(); 
    xhr.responseType = "blob"; 
    return <any>(xhr); 
    } 
} 

ブートストラップコード - エクスポート機能のメイン（initialHmrState？：任意の）：約束{

return bootstrap(App, [ 
    ...ENV_PROVIDERS, 
    ...PROVIDERS, 
    ...DIRECTIVES, 
    ...PIPES, 
    ...APP_PROVIDERS, 
    provide(BrowserXhr, { useClass: CustomBrowserXhr }) 
    ]) 
    .catch(err => console.error(err)); 

HTTP REQUEST-

download() { 
    this._http.get('http://localhost:9000/download/' + this._fileid) 
     .toPromise() 
     .then(res => { 
     if (res.headers.get("Content-Type").startsWith("image/")) { 
      var blob = new Blob([new Uint8Array(res._body)], { 
       type: res.headers.get("Content-Type") 
      }); 
      var urlCreator = window.URL; 
      var url = urlCreator.createObjectURL(blob); 
      console.log(url); 
      this.image = url; 
     } 
     }) 
    } 

Answer 1

何探しているのはarrayBuffer()です。あなたのコードは次のようになります。

download() { 
    this._http.get('http://localhost:9000/download/' + this._fileid) 
    .subscribe(
    data => { 
     this.image = data.arrayBuffer(); 
    }, 
    err => console.log('Error is..:' + err) 
    ); 
} 

しかし、残念ながら、arrayBuffer()はまだbeta.13として実装されていません。あなたはAngular2とのリクエストに応じてresponseTypeプロパティを設定することはできませんので、あなたが代わりに実際にXMLHttpRequest、Here is a plunker

getImage(url:string){ 
return Observable.create(observer=>{ 
    let req = new XMLHttpRequest(); 
    req.open('get',url); 
    req.responseType = "arraybuffer"; 
    req.onreadystatechange = function() { 
    if (req.readyState == 4 && req.status == 200) { 
     observer.next(req.response); 
     observer.complete(); 
    } 
    }; 
    req.send(); 
}); 
} 

Answer 2

を使用することができます

、それは現時点ではそう単純ではないのです（このため保留中のPRがあります）。

import {Injectable} from 'angular2/core'; 
import {BrowserXhr} from 'angular2/http'; 

@Injectable() 
export class CustomBrowserXhr extends BrowserXhr { 
    constructor() {} 
    build(): any { 
    let xhr = super.build(); 
    xhr.responseType = "blob"; 
    return <any>(xhr); 
    } 
} 

が次にあなたがBlogに応答ペイロードをラップする必要があります。基本となるXHRオブジェクトにblobにresponseTypeを設定するために、以下のような

は回避策として、あなたはAngular2のBrowserXhrクラスを拡張する必要があります対象：

downloadFile() { 
    this.http.get(
    this.http.get(
     'https://mapapi.apispark.net/v1/images/sparky_right.png') 
    .subscribe(
     (response) => { 
     var mediaType = 'image/png'; 
     var blob = new Blob([response._body], {type: mediaType}); 
     (...) 
     }); 
} 

このplunkrを参照してください：http://plnkr.co/edit/2ZodNBmv8OVj3LZSrozG?p=preview：このplunkrを参照してください。

• Angular 2 download PDF from API and Display it in View